<?php
/*
Template Name: Big Commerce
*/

get_header('new');
?>

<section class="section banner supply-chain-banner pb-5 no-lazy">
    <div class="container">
        <div class="row mt-xl-5 mt-lg-0">
            <div class="col-lg-6">
                <div class="text-cont mt-0">
                    <h1 class="banner-heading"><?php echo get_field('banner_heading'); ?></h1>
                    <p class="banner-content">
                        <?php echo get_field('banner_description'); ?>
                    </p>
					<?php $highlights = get_field('banner_highlights'); ?>
                    <ul>
                        <?php if ($highlights && is_array($highlights)) : ?>
                            <?php foreach ($highlights as $highlight) : ?>
                                <li>
                                    <img src="<?php echo get_template_directory_uri(); ?>/assets/img/apparel-inventory-management/tick.webp" alt="tick" class="img-fluid">
                                    <?php echo $highlight['item']; ?>
                                </li>
                            <?php endforeach; ?>
                        <?php endif; ?>
                    </ul>
                    <div class="banner-btns">
						<?php $cta_1 = get_field('banner_cta_1'); ?>
						 <?php if (!is_null($cta_1)) : ?>
                        <a href="<?php echo esc_url($cta_1['url']); ?>" class="primary animated-cta-btn <?php echo is_modal_link($cta_1['url']); ?>"><?php echo $cta_1['title']; ?></a>
						<?php endif; ?>
						<?php $cta_2 = get_field('banner_cta_2'); ?>
						<?php if (!is_null($cta_2)) : ?>
                        <a href="<?php echo esc_url($cta_2['url']); ?>" class="border-gradient-btn animated-btn <?php echo is_modal_link($cta_2['url']); ?>"><?php echo $cta_2['title']; ?>
                            <svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.35816 0.0996094H7.95016L13.3502 5.49961L7.95016 10.8996H5.35816L9.82216 6.43561H0.660156V4.56361H9.82216L5.35816 0.0996094Z" fill="black"/>
                            </svg>
                        </a>
						<?php endif; ?>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="img-cont justify-content-center">
					<?php
	$desktop_img_url = get_field('banner_image');
	$mobile_img_url  = get_field('banner_mobile_image');
?>
    <picture>
        <source class="no-lazy" media="(max-width: 767px)" srcset="<?php echo $mobile_img_url ? $mobile_img_url : $desktop_img_url ?>">
        <img src="<?php echo $desktop_img_url;?>" loading="eager" fetchpriority="high" decoding="async" width="546" height="421" class="img-fluid no-lazy" alt="<?php echo strip_tags(get_field('banner_heading')); ?>">
    </picture>
                </div>
            </div>
        </div>
    </div>
</section>

<section class="section about-our-product">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title"><?php echo get_field('certificates_title'); ?></h2>
        </div>
        <div class="logos-wrapper">
            <div class="owl-carousel owl-theme about-our-product-slider">
                <?php if (have_rows('certificates')): ?>
                    <?php while (have_rows('certificates')): the_row(); 
                        $image = get_sub_field('image');
                        if ($image): ?>
                            <div class="item">
                                <img src="<?php echo $image; ?>" alt="certificate" width="120" height="150" class="img-fluid">
                            </div>
                        <?php endif; ?>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>

<!-- Big Commerce integration Section Start -->
<section class="section big-commerce-integration bg-white">
    <div class="container">
        <div class="row gy-4">
            <div class="col-lg-6">
                <div class="text-cont">
                    <h2 class="section-title"><?php echo get_field('big_commerce_integratios_for_wms_section_title');?></h2>

                    <p class="section-content"><?php echo get_field('big_commerce_integratios_for_wms_section_text');?></p>

                    <?php if(have_rows('big_commerce_integratios_for_wms_section_lists_repeater')) :?>
                    <ul>
                        <?php while(have_rows('big_commerce_integratios_for_wms_section_lists_repeater')) : the_row();?>
                        <li>
                            <div class="svg-wrapper">
                                <?php echo get_sub_field('big_commerce_integratios_for_wms_section_lists_repeater_item_icon');?>
                            </div>
                            <?php echo get_sub_field('big_commerce_integratios_for_wms_section_lists_repeater_item_text');?>
                        </li>
                        <?php endwhile;?>
                    </ul>
                    <?php endif;?>
                    
                    <?php $b_button = get_field('big_commerce_integratios_for_wms_section_button');
                    if($b_button) :
                    ?>
                    <a href="<?php echo $b_button['url']?>" class="primary animated-cta-btn"><?php echo $b_button['title']?></a>
                    <?php endif;?>

                </div>
            </div>
            <div class="col-lg-6">
                <div class="img-wrapper d-flex justify-content-center align-items-center">
                    <img src="<?php echo get_field('big_commerce_integratios_for_wms_section_image');?>" alt="<?php echo wp_strip_all_tags(get_field('big_commerce_integratios_for_wms_section_title'));?>" class="img-fluid" loading="lazy">
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Big Commerce integration Section End -->


<!-- Sync Data Section Start -->
<section class="section sync-data-shipping light-grey">
    <div class="container">
        <div class="row justify-content-between">
            <div class="col-lg-6">
                <h2 class="section-title text-center text-lg-start"><?php echo get_field('sync_all_inventory_data_from_shipping_section_title');?></h2>
            </div>
            <div class="col-lg-5">
                <p class="section-content text-center text-lg-start"><?php echo get_field('sync_all_inventory_data_from_shipping_section_text');?></p>
            </div>
        </div>

        <div class="sync-data-accordian-wrapper">
            <div class="row gy-4">
                <div class="col-lg-6">
                    <div class="text-cont">
                        <?php if( have_rows('sync_all_inventory_data_from_shipping_tabs_repeater') ): ?>
                        <div class="accordion" id="syncAccordion">
                            <?php $sync = 1; while( have_rows('sync_all_inventory_data_from_shipping_tabs_repeater') ): the_row(); ?>
                            <div class="accordion-item">
                                <h2 class="accordion-header" id="heading<?php echo $sync?>">
                                    <button class="accordion-button <?php echo $sync == 1 ? '' : 'collapsed'?>" type="button" data-bs-toggle="collapse"
                                        data-bs-target="#syncCollapse<?php echo $sync?>" aria-expanded="<?php echo $sync == 1 ? 'true' : 'false'?>" aria-controls="syncCollapse<?php echo $sync?>">
                                        <span><?php echo $sync < 10 ? '0' . $sync . '.' : $sync?></span>
                                        <?php echo get_sub_field('sync_all_inventory_data_from_shipping_tabs_repeater_tab_name');?>
                                    </button>
                                </h2>
                                <div id="syncCollapse<?php echo $sync?>" class="accordion-collapse collapse <?php echo $sync == 1 ? 'show' : ''?> " aria-labelledby="heading<?php echo $sync?>"
                                    data-bs-parent="#syncAccordion">
                                    <div class="accordion-body">
                                        <?php echo get_sub_field('sync_all_inventory_data_from_shipping_tabs_repeater_tab_content');?>
                                    </div>
                                </div>
                            </div>
                            <?php $sync++; endwhile; ?>
                        </div>
                        <?php endif; ?>
                    </div>
                </div>
            
                <div class="col-lg-6">
                    <div class="img-wrapper d-flex justify-content-center align-items-center">
                        <img src="<?php echo get_field('sync_all_inventory_data_from_shipping_section_image');?>" alt="<?php echo wp_strip_all_tags(get_field('sync_all_inventory_data_from_shipping_section_title'));?>" class="img-fluid" loading="lazy">
                    </div>
                </div>
            </div>
        </div>
        
        <?php $s_button = get_field('sync_all_inventory_data_from_shipping_section_button');
        if($s_button) :
        ?>
        <div class="demo-btn-wrapper text-center">
            <a href="<?php echo $s_button['url']?>" class="primary animated-cta-btn"><?php echo $s_button['title']?></a>
        </div>
        <?php endif;?>
    </div>
</section>
<!-- Sync Data Section End -->


<!-- Resolve Construction Challenges Section Start -->
<section class="section bigcommerce-features-tabs bg-white">
    <div class="container">
        <div class="text-cont">
            <h2 class="section-title text-center"><?php echo get_field('wms_section_title'); ?></h2>
            <p class="section-content text-center"><?php echo get_field('wms_section_description'); ?></p>
        </div>

        <div class="resolve-construction-challanges-wrapper">
            <?php if (have_rows('wms_tabs')): ?>
                <ul class="row gx-3 nav nav-tabs" role="tablist">
                    <?php $fs = 0; while (have_rows('wms_tabs')): the_row(); ?>
                        <li class="col-lg-3 nav-item">
                            <a id="tabb-A<?php echo $fs; ?>" href="#poss-A<?php echo $fs; ?>" class="nav-link <?php echo $fs === 0 ? 'active' : ''; ?>" data-bs-toggle="tab" role="tab">
                                <span><?php echo $fs + 1; ?></span>
                                <?php echo get_sub_field('wms_tab_title'); ?>
                            </a>
                        </li>
                    <?php $fs++; endwhile; ?>
                </ul>
            <?php endif; ?>

            <?php if (have_rows('wms_tabs')): ?>
                <div class="row">
                    <div class="col-lg-12">
                        <!-- Tabs Start Here -->
                        <div class="responsive-tabs">
                            <div id="bigCommcontent" class="tab-content" role="tablist">
                                <?php $ffs = 0; while (have_rows('wms_tabs')): the_row(); ?>
                                    <div id="poss-A<?php echo $ffs; ?>" class="card tab-pane fade <?php echo $ffs === 0 ? 'show active' : ''; ?>" role="tabpanel" aria-labelledby="tabb-A<?php echo $ffs; ?>">
                                        <div class="card-header" role="tab" id="headings-A<?php echo $ffs; ?>">
                                            <h5 class="mb-0">
                                                <a data-bs-toggle="collapse" href="#poss-collapse-A<?php echo $ffs; ?>" aria-expanded="<?php echo $ffs === 0 ? 'true' : 'false'; ?>" aria-controls="collapse-A<?php echo $ffs; ?>">
                                                    <?php echo get_sub_field('wms_tab_title'); ?>
                                                </a>
                                            </h5>
                                        </div>

                                        <div id="poss-collapse-A<?php echo $ffs; ?>" class="collapse <?php echo $ffs === 0 ? 'show' : ''; ?>" data-bs-parent="#bigCommcontent" role="tabpanel" aria-labelledby="headings-A<?php echo $ffs; ?>">
                                            <div class="card-body">
                                                <div class="resolve-challanges-content-wrapper">
                                                    <div class="row gx-lg-5 gy-4 align-items-center">
                                                        <div class="col-lg-6">
                                                            <div class="img-cont">
                                                                <?php $image = get_sub_field('wms_tab_image'); ?>
                                                                <?php if (!empty($image)): ?>
                                                                    <img src="<?php echo esc_url($image['url']); ?>" class="img-fluid" loading="lazy" alt="<?php echo esc_attr($image['alt']); ?>">
                                                                <?php endif; ?>
                                                            </div>
                                                        </div>
                                                        <div class="col-lg-6">
                                                            <div class="resolve-challanges-content">
                                                                <h2 class="resolve-challanges-title"><?php echo get_sub_field('wms_tab_heading'); ?></h2>
                                                                <p class="resolve-challanges-text"><?php echo get_sub_field('wms_tab_description'); ?></p>
                                                                <div class="text-center text-lg-start mt-4">
                                                                    <a href="<?php echo esc_url(get_sub_field('wms_tab_button_link')); ?>" class="primary animated-cta-btn">
                                                                        <?php echo get_sub_field('wms_tab_button_text'); ?>
                                                                    </a>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                <?php $ffs++; endwhile; ?>
                            </div>
                        </div>
                        <!-- Tabs END Here -->
                    </div>
                </div>
            <?php endif; ?>
        </div>
    </div>
</section>
<!-- Resolve Construction Challenges Section End -->



<!-- Benefits of Big Commerce Integration Section Start -->
<section class="section benefits-of-big-commerce gray-bg">
    <div class="container">
        <div class="row gy-4">
            <div class="col-lg-6">
                <div class="text-cont">
                    <h2 class="section-title"><?php echo get_field('bo_bci_section_title');?></h2>

                    <div class="img-wrapper">
                        <img src="<?php echo get_field('bo_bci_section_image');?>" class="img-fluid" loading="lazy" alt="<?php echo wp_strip_all_tags(get_field('bo_bci_section_title'))?>">
                    </div>
                    <p class="section-content"><?php echo get_field('bo_bci_section_text');?></p>

                    <?php $b_button = get_field('bo_bci_section_button');
                    if($b_button) :
                    ?>
                    <a href="<?php echo $b_button['url']?>" class="primary animated-cta-btn"><?php echo $b_button['title']?></a>
                    <?php endif;?>
                </div>
            </div>

            <div class="col-lg-6">
                <?php if( have_rows('bo_bci_section_cards_repeater') ): ?>
                <div class="row gy-4 gy-xl-5">
                    <?php $bfi = 1; while( have_rows('bo_bci_section_cards_repeater') ): the_row();?>
                    <div class="col-md-6 col-lg-12 col-xl-6">
                        <div class="benefit-bigcommerce-card">
                            <p class="number"><?php echo $bfi < 10 ? '0' . $bfi : $bfi;?></p>
                            <h2 class="benefit-bigcommerce-card-title"><?php echo get_sub_field('bo_bci_section_cards_repeater_card_title');?></h2>
                            <p class="benefit-bigcommerce-card-content"><?php echo get_sub_field('bo_bci_section_cards_repeater_card_text');?></p>
                        </div>
                    </div>
                    <?php $bfi++; endwhile; ?>
                </div>
                <?php endif; ?>
            </div>
        </div>
    </div>
</section>
<!-- Benefits of Big Commerce Integration Section End -->

<!-- Start Free Trial Cta Section Start -->
<section class="section free-trial-cta-section bigcommerce-free-trial-cta bg-white">
    <div class="container">
        <div class="free-trial-cta-wrapper">
            <div class="row gy-3 align-items-center">
                <div class="col-12">
                    <div class="text-cont text-center">
                        <h2 class="risk-free-text"><?php echo get_field('affiliate_cta_heading');?></h2>
                        <h2 class="ware-fit-business"><?php echo get_field('affiliate_cta_text');?></h2>
                        <div class="free-trial-btn text-center">
                            <a href="<?php echo get_field('affiliate_cta_button')['url']?>" class="border-gradient-btn animated-btn"><?php echo get_field('affiliate_cta_button')['title']?></a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!-- Start Free Trial Cta Section End -->


<!-- industry benefits section start -->
<?php 
$industry = [
    'category' => 'big-commerce',
];
get_template_part('templates-parts/pages/industry-benefits',null,$industry)?>
<!-- industry benefits section end -->


<!-- How Bigcommerce Works Section Start -->
<section class="section how-bigcommerce-works bg-white">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title"><?php echo get_field('hbc_wms_works_section_title');?></h2>
            <p class="section-content"><?php echo get_field('hbc_wms_works_section_text');?></p>
        </div>

        <?php if( have_rows('hbc_wms_works_section_cards_repeater') ): ?>
        <div class="how-bigcommerce-works-wrapper">
            <div class="row justify-content-center gy-4 gx-lg-0">
            <?php $card = 1; while( have_rows('hbc_wms_works_section_cards_repeater') ): the_row();?>
                <div class="col-lg-4 col-md-6">
                    <div class="bigcommerce-works-card">
                        <div class="bigcommerce-works-card-child">
                            <p class="number"><?php echo $card < 10 ? '0' . $card : $card;?></p>
                            <h2 class="bigcommerce-works-card-title"><?php echo get_sub_field('hbc_wms_works_section_cards_repeater_card_title');?></h2>
                            <p class="how-bigcommerce-works-card-description"><?php echo get_sub_field('hbc_wms_works_section_cards_repeater_card_text');?></p>
                        </div>
                    </div>
                </div>
            <?php $card++; endwhile; ?>
                
            </div>
        </div>
        <?php endif; ?>

        <?php $h_button = get_field('hbc_wms_works_section_button');
        if($h_button) :
        ?>
        <div class="text-center">
            <a href="<?php echo esc_url($h_button['url']);?>" class="primary animated-btn"><?php echo $h_button['title']?></a>
        </div>
        <?php endif;?>
        
    </div>
</section>
<!-- How Bigcommerce Works Section End -->

<!-- testimonials start -->
<section class="section say-about-warego client-say-about-warego">
    <div class="container">
        <div class="text-center text-cont">
            <h2 class="section-title mb-4"><?php echo get_field('reviews_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('reviews_description'); ?></p>
        </div>

        <?php if( have_rows('reviews') ): ?>
        <div class="row gy-4">
        <?php while( have_rows('reviews') ): the_row();?>
            <div class="col-lg-6 right-sight">
                <div class="card">
                    <p><?php echo get_sub_field('quote');?></p>
                    <ul>
                        <li>
                            <img src="<?php echo get_sub_field('image');?>" alt="Sarah Johnson" class="img-fluid">
                        </li>
                        <li>
                            <h3><?php echo get_sub_field('name');?></h3>
                            <p><?php echo get_sub_field('position');?></p>
                        </li>
                    </ul>
                </div>
            </div>
            <?php endwhile; ?>
        </div>
        <?php endif; ?>
    </div>
</section>
<!-- testimonials end -->


<?php
$cta_text = get_field('dashboard_access_cta_text');
$btn_text = get_field('dashboard_access_cta_button_text');
$btn_url  = get_field('dashboard_access_cta_button_url');
$cta_img  = get_field('dashboard_access_cta_image');

$img_url = '';
$img_alt = '';

if (is_array($cta_img)) {
  $img_url = $cta_img['url'] ?? '';
  $img_alt = $cta_img['alt'] ?? '';
} elseif (is_numeric($cta_img)) {
  // IMPORTANT: handle numeric-string like "4505" too
  $img_id  = (int) $cta_img;
  $img_url = wp_get_attachment_url($img_id);
  $img_alt = get_post_meta($img_id, '_wp_attachment_image_alt', true);
} elseif (is_string($cta_img)) {
  // real URL string
  $img_url = $cta_img;
}

if (!empty(trim((string)$cta_text))) : ?>
<section class="section dashboard-access-cta wms-business-cta">
  <div class="container">
    <div class="box">
      <div class="row align-items-center">
        <div class="col-lg-6">
          <div class="img-cont slide-right">
            <?php if (!empty($img_url)): ?>
              <img src="<?php echo esc_url($img_url); ?>"
                   alt="<?php echo esc_attr($img_alt); ?>"
                   class="img-fluid" loading="lazy">
            <?php endif; ?>
          </div>
        </div>
        <div class="col-lg-6">
          <div class="text-cont slide-left">
            <p><?php echo wp_kses_post($cta_text); ?></p>

            <?php if (!empty($btn_text) && !empty($btn_url)): ?>
              <a href="<?php echo esc_url($btn_url); ?>" class="primary animated-cta-btn">
                <?php echo esc_html($btn_text); ?>
              </a>
            <?php endif; ?>

          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<?php endif; ?>

<!-- case studies start -->
<?php 
$portfolio = ['class' => 'bg-white'];
get_template_part('templates-parts/pages/case-studies',null,$portfolio);?>
<!-- case studies end -->

<?php
    $args = [
        'category' => 'big-commerce',
        'class'    => 'bg-white'
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>


<?php
get_footer();
?>


<script>
    $('.about-our-product-slider').owlCarousel({
        loop:false,
        margin:10,
        nav:false,
        dots: false,
        responsive:{
            0:{
                items:1
            },
            600:{
                loop:true,
                items:3
            },
            1000:{
                items:5
            }
        }
    });
    $('.real-feedback-slider').owlCarousel({
        loop:false,
        margin:40,
        nav:false,
        dots:false,
        dotsData:true,
        responsive:{
            0:{
                items:1
            },
            768:{
                items:2,
                margin:20
            },
            1000:{
                items:2
            }
        }
    });
    // industries benefits carousel
   $('.bigcommerce-industries-slider').owlCarousel({
        loop: true,
        margin: 20,
        nav: true,
        dots: false,
        navText: [
            `<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M17.8516 5.18826C18.5419 5.18826 19.1016 5.7479 19.1016 6.43826C19.1016 7.12861 18.5419 7.68825 17.8516 7.68825L17.8516 6.43825L17.8516 5.18826ZM1.24915 7.68825C0.558798 7.68825 -0.000846863 7.12861 -0.000846863 6.43825C-0.000846863 5.7479 0.558798 5.18825 1.24915 5.18825V6.43825V7.68825ZM4.51982 0.362182C5.01015 -0.123791 5.8016 -0.12026 6.28757 0.370069C6.77355 0.860397 6.77001 1.65185 6.27969 2.13782L5.39976 1.25L4.51982 0.362182ZM3.57041 3.06309L4.45034 3.95091L3.57041 3.06309ZM3.57041 9.81341L2.69048 10.7012L3.57041 9.81341ZM6.27969 10.7387C6.77001 11.2247 6.77355 12.0161 6.28757 12.5064C5.8016 12.9968 5.01015 13.0003 4.51982 12.5143L5.39976 11.6265L6.27969 10.7387ZM1.26979 6.11312L0.0298233 5.95508V5.95507L1.26979 6.11312ZM1.26979 6.76338L0.0298233 6.92143V6.92143L1.26979 6.76338ZM17.8516 6.43825L17.8516 7.68825L1.24915 7.68825V6.43825V5.18825L17.8516 5.18826L17.8516 6.43825ZM5.39976 1.25L6.27969 2.13782L4.45034 3.95091L3.57041 3.06309L2.69048 2.17528L4.51982 0.362182L5.39976 1.25ZM3.57041 9.81341L4.45034 8.92559L6.27969 10.7387L5.39976 11.6265L4.51982 12.5143L2.69048 10.7012L3.57041 9.81341ZM3.57041 3.06309L4.45034 3.95091C3.70003 4.69456 3.21366 5.17927 2.88976 5.58259C2.58169 5.96619 2.52481 6.15312 2.50976 6.27117L1.26979 6.11312L0.0298233 5.95507C0.12709 5.19196 0.491079 4.57683 0.940529 4.01718C1.37414 3.47726 1.98192 2.87754 2.69048 2.17528L3.57041 3.06309ZM3.57041 9.81341L2.69048 10.7012C1.98192 9.99897 1.37414 9.39925 0.940529 8.85932C0.491079 8.29968 0.12709 7.68454 0.0298233 6.92143L1.26979 6.76338L2.50976 6.60534C2.52481 6.72339 2.58169 6.91032 2.88976 7.29391C3.21366 7.69723 3.70003 8.18195 4.45034 8.92559L3.57041 9.81341ZM1.26979 6.11312L2.50976 6.27117C2.49562 6.38213 2.49562 6.49438 2.50976 6.60534L1.26979 6.76338L0.0298233 6.92143C-0.0110703 6.6006 -0.0110703 6.27591 0.0298233 5.95508L1.26979 6.11312Z" fill="black"/>
            </svg>`,
            `<svg width="20" height="13" viewBox="0 0 20 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M1.25 5.18826C0.559644 5.18826 -6.17226e-08 5.7479 0 6.43826C6.17226e-08 7.12861 0.559644 7.68826 1.25 7.68826L1.25 6.43826L1.25 5.18826ZM17.8524 7.68825C18.5428 7.68825 19.1024 7.12861 19.1024 6.43825C19.1024 5.7479 18.5428 5.18825 17.8524 5.18825L17.8524 6.43825L17.8524 7.68825ZM14.5817 0.362182C14.0914 -0.123791 13.3 -0.12026 12.814 0.370069C12.328 0.860397 12.3315 1.65185 12.8219 2.13782L13.7018 1.25L14.5817 0.362182ZM15.5312 3.0631L14.6512 3.95091L14.6512 3.95091L15.5312 3.0631ZM15.5312 9.81341L16.4111 10.7012L16.4111 10.7012L15.5312 9.81341ZM12.8219 10.7387C12.3315 11.2247 12.328 12.0161 12.814 12.5064C13.3 12.9968 14.0914 13.0003 14.5817 12.5143L13.7018 11.6265L12.8219 10.7387ZM17.8318 6.11312L19.0717 5.95508L19.0717 5.95507L17.8318 6.11312ZM17.8318 6.76338L19.0717 6.92143L19.0717 6.92143L17.8318 6.76338ZM1.25 6.43826L1.25 7.68826L17.8524 7.68825L17.8524 6.43825L17.8524 5.18825L1.25 5.18826L1.25 6.43826ZM13.7018 1.25L12.8219 2.13782L14.6512 3.95091L15.5312 3.0631L16.4111 2.17528L14.5817 0.362182L13.7018 1.25ZM15.5312 9.81341L14.6512 8.92559L12.8219 10.7387L13.7018 11.6265L14.5817 12.5143L16.4111 10.7012L15.5312 9.81341ZM15.5312 3.0631L14.6512 3.95091C15.4015 4.69456 15.8879 5.17927 16.2118 5.58259C16.5199 5.96619 16.5768 6.15312 16.5918 6.27117L17.8318 6.11312L19.0717 5.95507C18.9745 5.19196 18.6105 4.57683 18.161 4.01718C17.7274 3.47726 17.1196 2.87754 16.4111 2.17528L15.5312 3.0631ZM15.5312 9.81341L16.4111 10.7012C17.1196 9.99897 17.7274 9.39925 18.161 8.85932C18.6105 8.29968 18.9745 7.68454 19.0717 6.92143L17.8318 6.76338L16.5918 6.60534C16.5768 6.72339 16.5199 6.91032 16.2118 7.29391C15.8879 7.69723 15.4015 8.18195 14.6512 8.92559L15.5312 9.81341ZM17.8318 6.11312L16.5918 6.27117C16.6059 6.38213 16.6059 6.49438 16.5918 6.60534L17.8318 6.76338L19.0717 6.92143C19.1126 6.6006 19.1126 6.27591 19.0717 5.95508L17.8318 6.11312Z" fill="black"/>
            </svg>`
        ],
        responsive: {
            0: { items: 1 },
            600: { items: 2.5 },
            1000: { items: 2.5 }
        }
    });
</script>