

 <style>  
 .g-bg-black-opacity-0_21--after::after {
    background-image: linear-gradient(-45deg, <?php echo $boxtitle; ?>, <?php echo $boxdescribe; ?>) !important;

}
 </style>
   <section id="<?php echo $sectiontab; ?>"class="dzsparallaxer auto-init height-is-based-on-content use-loading g-bg-cover g-bg-black-opacity-0_21--after " >
	  <div class="divimage dzsparallaxer--target w-100" style="height: <?php echo $imagefull; ?>%; background: url(<?php echo $image; ?>)"></div>
      <div class="<?php echo $main; ?> g-z-index-1 g-pt-<?php echo $sectionptop; ?> g-pb-<?php echo $sectionpbuttom; ?>">
              <div class="row justify-content-center text-center">
               <div class="col-lg-9">
                <?php if ($titlename): ?><h1 class="h4 g-font-weight-600 mb-2" style="color:<?php echo $titlecss; ?>;"><?php echo $titlename; ?></h1><?php endif ?>
                <?php if ($rnlineh): ?><div class="d-inline-block mb-2" style="width:<?php echo $rnlinew; ?>px;height:<?php echo $rnlineh; ?>px;background-color:<?php echo $rnlinec; ?>;"></div><?php endif ?>
                <?php if ($describe): ?><p class="mb-0" style="color:<?php echo $titlesmcss; ?>;"><?php echo $describe; ?></p><?php endif ?>
               </div>
               </div>

              <!-- Products Block -->
              <div class="g-mx-minus-15">
                <div id="carouse<?php echo $sectionid; ?>" class="js-carousel" data-infinite="true" data-fade="<?php echo $fade; ?>" data-autoplay="<?php echo $autoplay; ?>" data-speed="<?php echo $speed; ?>" data-slides-scroll="<?php echo $scroll; ?>" data-slides-show="<?php echo $column; ?>"  data-rows="<?php echo $rows; ?>">
					 <?php foreach ($services as $service) { ?>
                  <div class="js-slide g-pa-<?php echo $boxmagin; ?>">
				  <div class="g-transition-0_3 g-bg-<?php echo $boxbjhover; ?>--hover g-color-<?php echo $boxcolorhover; ?>--hover u-shadow-v<?php echo $boxshadow; ?> u-shadow-v<?php echo $boxshadowhover; ?>--hover g-rounded-<?php echo $boxround; ?> text-<?php echo $boxposition; ?> g-px-<?php echo $boxpadding; ?> g-py-<?php echo $boxtbpadding; ?>" style="background-color:<?php echo $service['rboxcolor']; ?>;background-image: linear-gradient(33deg, <?php echo $boxbg; ?>, <?php echo $boxjbbj; ?>);border:<?php echo $boxborder; ?>px solid <?php echo $boxcolor; ?>;">
                    <?php if ($service['icon']): ?><span class="u-icon-v2 g-font-size-<?php echo $miconsize; ?> g-rounded-<?php echo $miconround; ?> g-mb-15" style="background-image: linear-gradient(-45deg, <?php echo $miconbj; ?>, <?php echo $miconjbbj; ?>);color:<?php echo $miconcolor; ?>;border:<?php echo $miconborder; ?>px solid <?php echo $miconbc; ?>;width:<?php echo $miconwidth; ?>px;height:<?php echo $miconheight; ?>px;">
                      <i class="<?php echo $service['icon']; ?>"></i>
                    </span><?php endif ?>
                  <?php if ($service['text']): ?><div class="js-counter g-font-size-16 g-font-size-<?php echo $maxfontsize; ?>--md mb-2" style="color:<?php echo $ncolor; ?>;"><?php echo $service['text']; ?>+</div><?php endif ?>
                  <?php if ($service['title']): ?><h4 class="h5 g-font-weight-300 mb-0" style="color:<?php echo $tcolor; ?>;"><?php echo $service['title']; ?></h4><?php endif ?>
                  <?php if ($service['depict']): ?><p style="color:<?php echo $depictcolor; ?>;"><?php echo $service['depict']; ?></p><?php endif ?>
				  </div>
				  </div>
                  <?php } ?> 
                </div>
              </div>
              <!-- End Products Block -->
                <div class="shortcode-scripts">
                  <!-- JS Plugins Init. -->
                  <script >
                    $(document).on('ready', function () {
                      // initialization of counters
                      var counters = $.HSCore.components.HSCounter.init('[class*="js-counter"]');
                    });
                  </script>
                </div>
	  </div>
    </section>
                  <!-- JS Plugins Init. -->
                  <script >
                    $(document).ready(function () {

                      $('#carouse<?php echo $sectionid; ?>').slick('setOption', 'responsive', [{
					  breakpoint: 1200,
                        settings: {
                          slidesToShow: 4
                        }
                      }, {  
                        breakpoint: 992,
                        settings: {
                          slidesToShow: 3
                        }
                      }, {
                        breakpoint: 768,
                        settings: {
                          slidesToShow: 2
                        }
                      }, {
                        breakpoint: 480,
                        settings: {
                          slidesToShow: 2
                        }
                      }], true);
                    });
                  </script>	
    <link rel="stylesheet" href="catalog/view/assets/vendor/dzsparallaxer/dzsparallaxer.css">
    <link rel="stylesheet" href="catalog/view/assets/vendor/dzsparallaxer/dzsscroller/scroller.css">
    <link rel="stylesheet" href="catalog/view/assets/vendor/dzsparallaxer/advancedscroller/plugin.css">
    <script src="catalog/view/assets/vendor/dzsparallaxer/dzsparallaxer.js"></script>
    <script src="catalog/view/assets/vendor/dzsparallaxer/dzsscroller/scroller.js"></script>
    <script src="catalog/view/assets/vendor/dzsparallaxer/advancedscroller/plugin.js"></script>
	<script src="catalog/view/assets/vendor/masonry/dist/masonry.pkgd.min.js"></script>    
    <script src="catalog/view/assets/js/components/hs.counter.js"></script>	    