<style>
.u-carousel-indicators-v1 li.slick-active span, .u-carousel-indicators-v1--white li.slick-active span {
    background-color: <?php echo $bjcolorafter; ?>;
}
.u-carousel-indicators-v1 span, .u-carousel-indicators-v1--white span {
    width: <?php echo $slidewidth; ?>px;
    height: <?php echo $slideheight; ?>px;
    border-radius: <?php echo $slideradius; ?>px;
    background-color: <?php echo $slidebjcolor; ?>;
    opacity: 1;
    border: <?php echo $sliderborder; ?>px solid <?php echo $sliderhkc; ?>;
    padding: <?php echo $sliderpadding; ?>px;
}
.u-carousel-indicators-v1 li.slick-active span, .u-carousel-indicators-v1--white li.slick-active span {
    width: <?php echo $sliderborderw; ?>px;
    border-radius: <?php echo $sliderborderrd; ?>px;
}
.fourimage{
   border-radius: <?php echo $slideradiustwo; ?>px;
   background: <?php echo $slidebackgroundtwo; ?>;
   border: <?php echo $sliderbordertwo; ?>px solid <?php echo $sliderhkctwo; ?>;
   color: <?php echo $slidecolortwo; ?>;
}
</style>
          <section id="evaluation" class="g-pt-<?php echo $eotop; ?> g-pb-<?php echo $eob; ?>" style="background-image: linear-gradient(-45deg, <?php echo $bgcolor; ?>, <?php echo $bgcolorcss; ?>);">
          <div class="<?php echo $main; ?>">
              <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 $etncolor; ?>;"><?php echo $titlename; ?></h1><?php endif ?>
                <?php if ($etlineh): ?><div class="d-inline-block mb-2" style="width:<?php echo $etlinew; ?>px;height:<?php echo $etlineh; ?>px;background-color:<?php echo $etlinec; ?>;"></div><?php endif ?>
                <?php if ($describe): ?><p class="mb-0" style="color:<?php echo $edcolor; ?>;"><?php echo $describe; ?></p><?php endif ?>
               </div>
               </div>

            <div id="carousel5" class="js-carousel js-carousel_single-item-thumbs5__thumbs text-center mx-auto g-max-width-400 g-mb-35" data-infinite="true" data-slides-show="4" data-center-mode="true" data-nav-for="#carousel6">
				 <?php foreach ($services as $service) { ?>
              <div class="js-thumb g-px-15--sm">
                <img class="g-width-60 g-height-60  g-rounded-<?php echo $imground; ?> u-shadow-v<?php echo $imgshadow; ?> <?php echo $imgthumb; ?>" style="padding:<?php echo $imgpadding; ?>;border:<?php echo $imgborder; ?>px solid <?php echo $imgcolor; ?>;" src="<?php echo $service['image']; ?>" alt="Image Description">
              </div>
			  <?php } ?>
            </div>

            <div id="carousel6" class="js-carousel js-carousel_single-item-thumbs5__slides text-center mx-auto g-max-width-645 g-pb-30" data-infinite="true" data-autoplay="<?php echo $autoplay; ?>" data-speed="<?php echo $speed; ?>" data-fade="<?php echo $fade; ?>" data-animation="linear" data-pagi-classes="u-carousel-indicators-v1 fourimage g-absolute-centered--x g-bottom-0" data-nav-for="#carousel5">
              <?php foreach ($services as $service) { ?>
			  <div class="js-slide">
                <h4 class="h4 text-uppercase g-font-size-15 g-font-weight-600 g-mb-15" style="color:<?php echo $titlecss; ?>;">
                  <?php echo $service['title']; ?>, <em class="g-font-style-normal" style="color:<?php echo $positioncss; ?>;"><?php echo $service['other']; ?></em>
                </h4>
                <blockquote class="lead g-font-size-14 g-mb-0" style="color:<?php echo $titlesmcss; ?>;"><?php echo $service['text']; ?></blockquote>
              </div>
              <?php } ?>
            </div>
                 </div>
                </section>	       


            <!-- JS Plugins Init. -->
            <script >
              $(document).ready(function () {
                // custom functions
                $('#carousel5').on('click', '.js-thumb', function (e) {
                  e.stopPropagation();

                  var i = $(this).data('slick-index');

                  if ($('#carousel5').slick('slickCurrentSlide') !== i) {
                    $('#carousel5').slick('slickGoTo', i);
                  }
                });
              });
            </script>
        			   