<style>
.u-progress__pointer-v2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -5px;
    margin-left: -5px;
    border-style: solid;
    border-color: <?php echo $colortwo; ?> transparent;
    border-width: 5px 5px 0;
}
</style>
               <section id="skill" class="g-pt-<?php echo $sectionptop; ?> g-pb-<?php echo $sectionpbuttom; ?>" style="background-image: linear-gradient(-45deg, <?php echo $sectionbj; ?>, <?php echo $sectionjbbj; ?>);">
               <div class="container">
              <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 $sectiontitle; ?>;"><?php echo $titlename; ?></h1><?php endif ?>
                <?php if ($lineh): ?><div class="d-inline-block mb-2" style="width:<?php echo $linew; ?>px;height:<?php echo $lineh; ?>px;background-color:<?php echo $linec; ?>;"></div><?php endif ?>
                <?php if ($describe): ?><p class="mb-0" style="color:<?php echo $sectiondescribe; ?>;"><?php echo $describe; ?></p><?php endif ?>
               </div>
               </div>
					<div class="row">
						<div class="col-md-6 g-mb-20">
						<?php foreach ($services as $service) { ?>
                    <div id="accordion-03" class="u-accordion" role="tablist" aria-multiselectable="true">
                      <!-- Card -->
                      <div class="card rounded-0 g-mb-5" style="border:1px solid <?php echo $acordiontithover; ?>;">
                        <?php if ($service['title1']): ?><div id="accordion-03-heading-0<?php echo $service['qiehuan1']; ?>" style="background-color:<?php echo $acordionbj; ?>;" class="u-accordion__header" role="tab">
                          <h5 class="mb-0">
                            <a style="color:<?php echo $acordiontit; ?>;" class="collapsed d-block u-link-v5 g-font-size-16 " href="#accordion-03-body-0<?php echo $service['qiehuan1']; ?>" data-toggle="collapse" data-parent="#accordion-03" aria-expanded="false" aria-controls="accordion-03-body-0<?php echo $service['qiehuan1']; ?>"><?php echo $service['title1']; ?>
                            </a>
                          </h5>
                        </div><?php endif ?>
                        <?php if ($service['text1']): ?><div id="accordion-03-body-0<?php echo $service['qiehuan1']; ?>" class="collapse" role="tabpanel" aria-labelledby="accordion-03-heading-0<?php echo $service['qiehuan1']; ?>">
                          <div class="u-accordion__body g-brd-top g-brd-gray-light-v4" style="color:<?php echo $acordionbjhover; ?>;">
                            <?php echo $service['text1']; ?>
                          </div>
                        </div><?php endif ?>
                      </div>
                      <!-- End Card -->
                    </div>
					<?php } ?>
						</div>
						
						<div class="col-md-6">
						<?php foreach ($services as $service) { ?>
                    <?php if ($service['skill1']): ?><h6 class="text-uppercase g-font-size-12 g-font-weight-600 g-letter-spacing-0_5 g-pos-rel g-z-index-2" style="color:<?php echo $colortitle; ?>;"><?php echo $service['skill1']; ?></h6><?php endif ?>

                    <?php if ($service['number1']): ?><div class="js-hr-progress-bar progress g-height-20 rounded-0 g-overflow-visible g-mb-20" style="background-color:<?php echo $colorall; ?>;">
                      <div class="js-hr-progress-bar-indicator progress-bar g-pos-rel" role="progressbar" style="width: <?php echo $service['number1']; ?>%;background-color:<?php echo $colorone; ?>;" aria-valuenow="<?php echo $service['number1']; ?>" aria-valuemin="0" aria-valuemax="100">
                        <div class="text-center u-progress__pointer-v2 g-font-size-11" style="background-color:<?php echo $colortwo; ?>;color:<?php echo $colorthree; ?>;"><?php echo $service['number1']; ?>%</div>
                      </div>
                    </div><?php endif ?>
                     <?php } ?>

                    <!-- JS Plugins Init. -->
                    <script >
                      $(document).on('ready', function () {
                        // initialization of horizontal progress bars
                        var horizontalProgressBars = $.HSCore.components.HSProgressBar.init('.js-hr-progress-bar', {
                          direction: 'horizontal',
                          indicatorSelector: '.js-hr-progress-bar-indicator'
                        });
                      });
                    </script>
					
						</div>
                        
					</div>

                </div>
                </section>
<script src="catalog/view/assets/js/components/hs.progress-bar.js"></script>