<style>
.g-bg-bluegray-opacity-0_717--after::after{
    background: rgba(0, 0, 0, 0) linear-gradient(to right, <?php echo $bgcolor; ?> 0%,<?php echo $bgcolorcss; ?> 100%) repeat scroll 0 0 !important;
}
</style>
              <section id="" class="g-pt-<?php echo $rptop; ?> g-pb-<?php echo $rpbuttom; ?> g-bg-img-hero g-bg-pos-top-center g-bg-size-cover g-bg-cover g-bg-bluegray-opacity-0_717--after" style="background-image: url(<?php echo $image; ?>);">              
               <div class="<?php echo $main; ?> g-pos-rel g-z-index-1">
              <div class="row justify-content-center text-center g-mb-30">
               <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 ($rtwolh): ?><div class="d-inline-block mb-2" style="width:<?php echo $rtwolw; ?>px;height:<?php echo $rtwolh; ?>px;background-color:<?php echo $rtwolc; ?>;"></div><?php endif ?>
                <?php if ($describe): ?><p class="mb-0" style="color:<?php echo $bordercss; ?>;"><?php echo $describe; ?></p><?php endif ?>
               </div>
               </div>
			   
              <!-- Products Block -->
              <div class="g-mx-minus-15">
                <div id="carouse22" 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 $rorow; ?>">
					 <?php foreach ($services as $service) { ?>
					 <?php if ($service['link']) { ?>
                  <div class="js-slide g-pa-<?php echo $mpppa; ?>">
                <!-- Figure -->
                <figure class="u-shadow-v<?php echo $boxshadow; ?> u-shadow-v<?php echo $boxshadowhover; ?>--hover g-rounded-<?php echo $boxround; ?> text-<?php echo $boxposition; ?> g-pa-<?php echo $mpa; ?>" style="background-image:linear-gradient(33deg, <?php echo $mbgcolor; ?>, <?php echo $mbgcolorjb; ?>);border:<?php echo $mborder; ?>px solid <?php echo $mbcolor; ?>;">
                        <a target="_blank" class="u-link-v5"  style="color:<?php echo $linkcolor; ?>;" href="<?php echo $service['link']; ?>">
						<h4 class="h6 g-mb-0" style="color:<?php echo $mtitle; ?>;"><?php echo $service['title']; ?></h4>
						</a>
                </figure>
                <!-- End Figure -->
                  </div>
				  <?php } else { ?>
                  <div class="js-slide g-pa-<?php echo $mpppa; ?>">
                <!-- Figure -->
                <figure class="u-shadow-v<?php echo $boxshadow; ?> u-shadow-v<?php echo $boxshadowhover; ?>--hover g-rounded-<?php echo $boxround; ?> text-<?php echo $boxposition; ?> g-pa-<?php echo $mpa; ?>" style="background-image:linear-gradient(33deg, <?php echo $mbgcolor; ?>, <?php echo $mbgcolorjb; ?>);border:<?php echo $mborder; ?>px solid <?php echo $mbcolor; ?>;">
                        <h4 class="h6 g-mb-0" style="color:<?php echo $mtitle; ?>;"><?php echo $service['title']; ?></h4>
                </figure>
                <!-- End Figure -->
                  </div>
                  <?php } ?> 
                  <?php } ?> 				  
                </div>
              </div>
              <!-- End Products Block -->

                </div>
                </section>
				
                  <!-- JS Plugins Init. -->
                  <script >
                    $(document).ready(function () {

                      $('#carouse22').slick('setOption', 'responsive', [{
					  breakpoint: 1200,
                        settings: {
                          slidesToShow: 4
                        }
                      }, {  
                        breakpoint: 992,
                        settings: {
                          slidesToShow: 3
                        }
                      }, {
                        breakpoint: 768,
                        settings: {
                          slidesToShow: 2
                        }
                      }, {
                        breakpoint: 480,
                        settings: {
                          slidesToShow: 3
                        }
                      }], true);
                    });
                  </script>	



          
              