<?php
/*
Template Name: Inventory Software
*/

get_header('new');
?>
<section class="section banner apparel-inventory-banner 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']; ?>
                            <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M5.598 0.799999H8.19L13.59 6.2L8.19 11.6H5.598L10.062 7.136H0.9V5.264H10.062L5.598 0.799999Z" fill="white"/>
                            </svg>
                        </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 d-block">
					<?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="636" height="404" class="img-fluid no-lazy" alt="Manufacturing Banner">
    </picture>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 2nd section -->
<?php get_template_part('templates-parts/pages/certificates');?>
<!-- end 2nd section -->


<section class="section advanced-delivery-app-cards">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5">
                <?php echo get_field('card_heading_title'); ?>
                <?php if ($highlight = get_field('highlighted_word_card')): ?>
                    <span><?php echo esc_html($highlight); ?></span>
                <?php endif; ?>
            </h2>
            <?php if ($desc = get_field('description_crds')): ?>
                <p class="section-content text-center"><?php echo esc_html($desc); ?></p>
            <?php endif; ?>
        </div>

        <div class="cards-parent-wrapper mt-4">
            <div class="row gy-lg-0 gy-4">
                <?php if (have_rows('cards')): ?>
                    <?php while (have_rows('cards')): the_row(); ?>
                        <div class="col-12 col-md-6 col-lg-4">
                            <div class="card" data-aos="fade-up" data-aos-duration="1000">
                                <div class="card-header">
                                    <h2><?php echo get_sub_field('card_title'); ?></h2>
                                    <div class="svg-image-wrapper">
                                        <?php echo get_sub_field('card_svg'); ?>
                                    </div>
                                </div>
                                <div class="card-description">
                                    <p><?php echo get_sub_field('card_description'); ?></p>
                                </div>
                            </div>
                        </div>
                    <?php endwhile; ?>
                <?php endif; ?>
            </div>

            <div class="text-center mt-5">
                <a href="<?php echo get_field('cards_button_link'); ?>" class="primary animated-cta-btn"><?php echo get_field('cards_button_text'); ?></a>
            </div>
        </div>
    </div>
</section>


<section class="section comprehensive-features manufacturing-warehouse-features">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5"><?php echo get_field('features_tabs_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('features_tabs_description'); ?></p>
        </div>

       <!-- Tabs Start Here -->
        <?php $tabs = get_field('features_tabs'); ?>
        <div class="responsive-tabs">
            <ul class="nav nav-tabs" role="tablist">
                <?php if ($tabs && is_array($tabs)) : ?>
                    <?php foreach ($tabs as $index => $tab) : ?>
                        <li class="nav-item">
                            <a id="tab-<?php echo $index; ?>" href="#pos-<?php echo $index; ?>" class="nav-link <?php echo $index === 0 ? 'active' : ''; ?>" data-bs-toggle="tab" role="tab">
                                <?php echo $tab['heading']; ?>
                            </a>
                        </li>
                    <?php endforeach; ?>
                <?php endif; ?>
            </ul>

            <div id="content" class="mt-5 tab-content" role="tablist">

                <?php if ($tabs && is_array($tabs)) : ?>
                    <?php foreach ($tabs as $index => $tab) : ?>
                        <div id="pos-<?php echo $index; ?>" class="card tab-pane fade <?php echo $index === 0 ? 'show active' : ''; ?>" role="tabpanel" aria-labelledby="tab-<?php echo $index; ?>">
                            <div class="card-header" role="tab" id="heading-<?php echo $index; ?>">
                                <h5 class="mb-0">
                                    <a data-bs-toggle="collapse" href="#pos-collapse-<?php echo $index; ?>" aria-expanded="true" aria-controls="collapse-<?php echo $index; ?>">
                                        <?php echo $tab['heading']; ?>
                                    </a>
                                </h5>
                            </div>
                            <div id="pos-collapse-<?php echo $index; ?>" class="collapse <?php echo $index === 0 ? 'show' : ''; ?>" data-bs-parent="#content" role="tabpanel"
                                aria-labelledby="heading-<?php echo $index; ?>">
                                <div class="card-body">
                                    <div class="row align-items-center">
                                        <div class="col-lg-6">
                                            <div class="img-cont">
                                                <img src="<?php echo esc_url($tab['image']); ?>" alt="<?php echo strip_tags($tab['heading']); ?>" class="img-fluid">
                                            </div>
                                        </div>
                                        <div class="col-lg-6">
                                            <div class="text-cont">
                                                <h3><?php echo $tab['heading']; ?></h3>
                                                <?php $highlights = $tab['highlights']; ?>
                                                <ul>
                                                    <?php if ($highlights && is_array($highlights)) : ?>
                                                        <?php foreach ($highlights as $highlight) : ?>
                                                            <li>
                                                                <svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                                    <path fill-rule="evenodd" clip-rule="evenodd" d="M8.81049 0.479129C8.05362 -0.15971 6.9464 -0.159709 6.18952 0.479129L5.50022 1.06093C5.17852 1.33245 4.78043 1.49736 4.36096 1.53283L3.46215 1.60884C2.47523 1.69231 1.69231 2.47523 1.60884 3.46215L1.53283 4.36096C1.49736 4.78043 1.33245 5.17852 1.06093 5.50023L0.479129 6.18952C-0.15971 6.9464 -0.159709 8.05362 0.479129 8.81049L1.06093 9.49978C1.33245 9.82148 1.49736 10.2196 1.53283 10.6391L1.60884 11.5379C1.69231 12.5248 2.47523 13.3078 3.46215 13.3912L4.36096 13.4671C4.78043 13.5027 5.17852 13.6676 5.50023 13.9391L6.18952 14.5209C6.9464 15.1597 8.05362 15.1597 8.81049 14.5209L9.49978 13.9391C9.82148 13.6676 10.2196 13.5027 10.6391 13.4671L11.5379 13.3912C12.5248 13.3078 13.3078 12.5248 13.3912 11.5379L13.4671 10.6391C13.5027 10.2196 13.6676 9.82148 13.9391 9.49978L14.5209 8.81049C15.1597 8.05362 15.1597 6.9464 14.5209 6.18952L13.9391 5.50022C13.6676 5.17852 13.5027 4.78043 13.4671 4.36096L13.3912 3.46215C13.3078 2.47523 12.5248 1.69231 11.5379 1.60884L10.6391 1.53283C10.2196 1.49736 9.82148 1.33245 9.49978 1.06093L8.81049 0.479129ZM11.1945 6.1148C11.5516 5.75775 11.5516 5.17886 11.1945 4.82181C10.8376 4.46475 10.2586 4.46475 9.90153 4.82181L6.48457 8.2388L5.09932 6.85356C4.74227 6.4965 4.16338 6.4965 3.80633 6.85356C3.44927 7.2106 3.44927 7.7895 3.80633 8.14655L5.83808 10.1783C6.19513 10.5353 6.77402 10.5353 7.13107 10.1783L11.1945 6.1148Z" fill="#3ED37A"/>
                                                                </svg>
                                                                <?php echo $highlight['item']; ?>
                                                            </li>
                                                        <?php endforeach; ?>
                                                    <?php endif; ?>
                                                </ul>
                                                <?php if ($tab['cta']) : ?>
                                                    <a href="<?php echo esc_url($tab['cta']['url']); ?>" class="primary animated-cta-btn">
                                                        <?php echo $tab['cta']['title']; ?>
                                                    </a>
                                                <?php endif; ?>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    <?php endforeach; ?>
                <?php else : ?>
                    <p>No tabs available.</p>
                <?php endif; ?>
            </div>
        </div>
        <!-- Tabs END Here -->
    </div>
</section>

<section class="section why-leading pt-5">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5"><?php echo get_field('why_warego_wms_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('why_warego_wms_description'); ?></p>
        </div>
        <?php if( have_rows('why_warego_wms_features') ): ?>
        <ul>
            <?php while( have_rows('why_warego_wms_features') ): the_row(); ?>
                <li>
                    <div class="left">
                        <?php $image = get_sub_field('image'); ?>
                        <?php if ($image) : ?>
                            <img src="<?php echo esc_url($image); ?>" alt="<?php echo get_sub_field('heading'); ?>" class="img-fluid">
                        <?php endif; ?>
                    </div>
                    <div class="right">
                        <h3><?php echo get_sub_field('heading'); ?></h3>
                        <p><?php echo get_sub_field('description'); ?></p>
                    </div>
                </li>
            <?php endwhile; ?>
        </ul>
        <?php else: ?>
        <p>No features available.</p>
        <?php endif; ?>

        <div class="text-center mt-5">
            <a href="<?php echo esc_url(get_field('why_warego_wms_cta_link')); ?>" class="primary animated-cta-btn" <?php echo is_modal_link(get_field('why_warego_wms_cta_link')); ?>><?php echo get_field('why_warego_wms_cta_label'); ?></a>
        </div>
    </div>
</section>

<section class="section what-we-do">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-3"><?php echo get_field('fulfillment_title'); ?></h2>
            <p class="section-content"><?php echo get_field('fulfillment_content'); ?></p>
        </div>

        <div class="row">
            <div class="col-md-6">
                <div class="img-cont">
                    <img src="<?php echo get_field('fulfillment_left_image'); ?>" alt="what we do" class="img-fluid">
                </div>
            </div>
            <div class="col-md-6">
                <ul>
                    <li>
                        <div class="top">
                            <h3><?php echo get_field('fulfillment_box_heading'); ?></h3>
                            <img src="<?php echo get_field('fulfillment_box_image'); ?>" alt="icon" class="img-fluid">
                        </div>
                        <div class="bottom">
                            <p><?php echo get_field('fulfillment_box_content'); ?></p>
                        </div>
                    </li>
                    <li>
                        <div class="top">
                            <h3><?php echo get_field('fulfillment_box_heading1'); ?></h3>
                            <img src="<?php echo get_field('fulfillment_box_image1'); ?>" alt="icon" class="img-fluid">
                        </div>
                        <div class="bottom">
                            <p><?php echo get_field('fulfillment_box_content1'); ?></p>
                        </div>
                    </li>
                    <li>
                        <div class="top">
                            <h3><?php echo get_field('fulfillment_box_heading2'); ?></h3>
                            <img src="<?php echo get_field('fulfillment_box_image2'); ?>" alt="icon" class="img-fluid">
                        </div>
                        <div class="bottom">
                            <p><?php echo get_field('fulfillment_box_content2'); ?></p>
                        </div>
                    </li>
                    <li>
                        <div class="top">
                            <h3><?php echo get_field('fulfillment_box_heading3'); ?></h3>
                            <img src="<?php echo get_field('fulfillment_box_image3'); ?>" alt="icon" class="img-fluid">
                        </div>
                        <div class="bottom">
                            <p><?php echo get_field('fulfillment_box_content3'); ?></p>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="text-center mt-5">
            <a href="<?php echo get_field('fulfillment_button_link'); ?>" class="primary animated-cta-btn"><?php echo get_field('fulfillment_button_text'); ?></a>
        </div>
    </div>
</section>

<!-- integration tabs start -->
<?php get_template_part('templates-parts/pages/integration-post-tabs')?>
<!-- integration tabs end -->

<section class="section calculate-your-roi-analysis">
    <div class="container">
        <div class="text-cont text-center">
            <h2 class="section-title mb-5"><?php echo get_field('calculation_table_heading'); ?></h2>
            <p class="section-content"><?php echo get_field('calculation_table_description'); ?></p>
        </div>
        <?php
            $columns = get_field('calculation_table_columns');
            $column_names = [
                'first-column',
                'second-column',
                'third-column'
            ];
        ?>
        <div class="wareGo-investment">
            <?php foreach ($columns as $index => $column) : ?>
                <ul class="<?php echo $column_names[$index]; ?>">
                    <?php foreach ($column['column'] as $item) : ?>
                        <?php foreach ($item['rows'] as $row) : ?>
                            <li>
                                <?php echo $row['row']; ?>
                                <span></span>
                            </li>
                        <?php endforeach; ?>
                    <?php endforeach; ?>
                </ul>
            <?php endforeach; ?>
        </div>
        <?php $cta = get_field('calculation_table_cta'); ?>
        <div class="text-center mt-5">
            <a href="<?php echo $cta['url']; ?>" class="primary animated-cta-btn text-capitalize" <?php echo is_modal_link($cta['url']); ?>><?php echo $cta['title']; ?></a>
        </div>
    </div>
</section>

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

        <?php $reviews = get_field('reviews'); ?>
        <div class="row gy-4">
            <div class="col-xl-6 col-lg-5 left-sight">
                <?php if (is_array($reviews) && isset($reviews[0])) : ?>
                    <div class="card">
                        <p><?php echo $reviews[0]['quote']; ?></p>
                        <ul>
                            <li>
                                <img src="<?php echo $reviews[0]['image']; ?>" alt="<?php echo $reviews[0]['name']; ?>" class="img-fluid">
                            </li>
                            <li>
                                <h3><?php echo $reviews[0]['name']; ?></h3>
                                <p><?php echo $reviews[0]['position']; ?></p>
                            </li>
                        </ul>
                    </div>
                <?php endif; ?>
            </div>
            <div class="col-xl-6 col-lg-7 right-sight">
                <div class="row gy-3">
                    <div class="col-lg-12">
                        <?php if (is_array($reviews) && isset($reviews[1])) : ?>
                            <div class="card">
                                <p><?php echo $reviews[1]['quote']; ?></p>
                                <ul>
                                    <li>
                                        <img src="<?php echo $reviews[1]['image']; ?>" alt="<?php echo $reviews[1]['name']; ?>" class="img-fluid">
                                    </li>
                                    <li>
                                        <h3><?php echo $reviews[1]['name']; ?></h3>
                                        <p><?php echo $reviews[1]['position']; ?></p>
                                    </li>
                                </ul>
                            </div>
                        <?php endif; ?>
                    </div>
                    <div class="col-lg-6">
                        <?php if (is_array($reviews) && isset($reviews[2])) : ?>
                            <div class="card">
                                <p><?php echo $reviews[2]['quote']; ?></p>
                                <ul>
                                    <li>
                                        <img src="<?php echo $reviews[2]['image']; ?>" alt="<?php echo $reviews[2]['name']; ?>" class="img-fluid">
                                    </li>
                                    <li>
                                        <h3><?php echo $reviews[2]['name']; ?></h3>
                                        <p><?php echo $reviews[2]['position']; ?></p>
                                    </li>
                                </ul>
                            </div>
                        <?php endif; ?>
                    </div>
                    <div class="col-lg-6">
                        <?php if (is_array($reviews) && isset($reviews[3])) : ?>
                            <div class="card">
                                <p><?php echo $reviews[3]['quote']; ?></p>
                                <ul>
                                    <li>
                                        <img src="<?php echo $reviews[3]['image']; ?>" alt="<?php echo $reviews[3]['name']; ?>" class="img-fluid">
                                    </li>
                                    <li>
                                        <h3><?php echo $reviews[3]['name']; ?></h3>
                                        <p><?php echo $reviews[3]['position']; ?></p>
                                    </li>
                                </ul>
                            </div>
                        <?php endif; ?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- pricing section start -->
<?php 
$pricing = [
    'class' => 'supply-chain-pricing-cards pt-5',
    'headingcon' => 'h2',
];
get_template_part('templates-parts/pages/pricing',null,$pricing)?>
<!-- pricing section end -->


<!-- industry  section start -->
<?php 
$industry = [
    'category' => 'manufacturing-inventory-software'
];
get_template_part('templates-parts/pages/industry-solutions',null,$industry)?>
<!-- industry section end -->


<!-- Real Feedbacks section -->
<?php echo get_template_part('templates-parts/pages/real-results');?>
<!-- Real Feedbacks section end -->

<?php
    $args = [
        'category'  => 'inventory-software',
        'heading'   => 'Frequently Asked <span>Questions</span>',
		'class'     => 'pt-5 bg-white',
    ];
    get_template_part('templates-parts/pages/faqs-new', null, $args);
?>



<section class="section manufacturing-warehouse-cta">
    <div class="container">
        <div class="box">
            <p><?php echo get_field('cta_titles'); ?></p>
            <a href="<?php echo get_field('cta_button_links'); ?>" class="primary animated-cta-btn">Book a demo!
                <svg width="14" height="12" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M5.598 0.799999H8.19L13.59 6.2L8.19 11.6H5.598L10.062 7.136H0.9V5.264H10.062L5.598 0.799999Z" fill="white"/>
                </svg>
            </a>
        </div>
    </div>
</section>

<?php
    get_footer('new');
?>
<script>
    $('.banner-logos-slider').owlCarousel({
        loop: false,
        margin: 10,
        nav: false,
        autoplay: true,
        dots: false,
        responsive: {
            0: {
                items: 1
            },
            600: {
                items: 2
            },
            1000: {
                items: 5
            }
        }
    });
    $('.portfolio-slider').owlCarousel({
        loop:false,
        margin:40,
        nav:false,
        dots:true,
        dotsData:true,
        responsive:{
            0:{
                items:1
            },
            600:{
                items:2,
                margin:20
            },
            1000:{
                items:2
            }
        }
    });
    $('.more-industries-slider').owlCarousel({
    loop: false, 
    margin: 20,
    nav: true,
    navText: ["<img src='<?php echo get_template_directory_uri();?>/assets/img/left-arrow.webp'>", "<img src='<?php echo get_template_directory_uri();?>/assets/img/right-arrow.webp'>"],
    dots: false,
    // stagePadding: 90, 
    responsive: {
        0: {
            items: 1, 
            stagePadding: 1, 
        },
        480: {
            items: 1, 
            stagePadding: 5, 
        },
        600: {
            items: 2, 
            stagePadding: 0, 

        },
        1200: {
            items : 3 ,
            // stagePadding: 35,
        },
    }
});
$('.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
            }
        }
    });


    // Inventory accuracy rate Card animation Script Start ************
    const card = document.querySelector('.improve-warehouse-card');

    card.addEventListener('mouseenter', () => {
        gsap.to('.order-picking-wrapper ul', {
            bottom: '85px',
            duration: 0.7,
            ease: 'power2.out',
        });
    });

    card.addEventListener('mouseleave', () => {
        gsap.to('.order-picking-wrapper ul', {
            bottom: '0px',
            duration: 0.7,
            ease: 'power2.out',
        });
    });
    // Inventory accuracy rate Card animation Script End ************


    // data accuracy Card animation Script Start ************
    const uniqueness_wrapper = document.querySelector('.data-accuracy-integrity');

    uniqueness_wrapper.addEventListener('mouseenter', () => {

        gsap.to('.timeliness', {
            top: '80px',
            right: '45px',
            rotation: -12,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.consistency', {
            top: '60px',
            left: '20px',
            rotation: 5,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.validity', {
            top: '40px',
            right: '20px',
            rotation: -8,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.uniqueness', {
            scale: 1.3,
            rotation: 3,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.completeness', {
            top: '25px',
            left: '35px',
            rotation: 15,
            duration: 0.5,
            ease: 'power2.out',
        });
    });

    uniqueness_wrapper.addEventListener('mouseleave', () => {
        gsap.to('.timeliness', {
            top: '70px',
            right: '35px',
            rotation: -7.41,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.consistency', {
            top: '68px',
            left: '12px',
            rotation: -7.41,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.validity', {
            top: '35px',
            right: '12px',
            rotation: 10.37,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.uniqueness', {
            scale: 1,
            rotation: -0.17,
            duration: 0.5,
            ease: 'power2.out',
        });

        gsap.to('.completeness', {
            top: '28px',
            left: '30px',
            rotation: 10.37,
            duration: 0.5,
            ease: 'power2.out',
        });
    });
    // data accuracy Card animation Script End ************


    // message card animation Script Start ************
    const cardWrapper = document.querySelector('.multiwarehouse-card');

    cardWrapper.addEventListener('mouseenter', () => {
        gsap.to('.message', {
            top: '20px',
            left: '25%',
            opacity: 1,
            duration: 0.5,
            scale: 1.8,
            ease: 'power2.out',
        });

        gsap.to('.message-two', {
            top: '30px',
            left: '25%',
            opacity: 1,
            duration: 0.5,
            scale: 1.8,
            ease: 'power2.out',
            delay: 0.5,
        });
    });

    cardWrapper.addEventListener('mouseleave', () => {
        gsap.to('.message', {
            top: '-100px',
            opacity: 0,
            duration: 0.5,
            ease: 'power2.in',
        });

        gsap.to('.message-two', {
            top: '-120px',
            opacity: 0,
            duration: 0.5,
            ease: 'power2.in',
            delay: 0.2,
        });
    });
    // message card animation Script End ************


    // Elipse Chart Image card animation Script Start ************
    const handLineImg = document.querySelector('.hand-line-img');

    document.querySelector('.advanced-reporting').addEventListener('mouseenter', () => {
        gsap.to(handLineImg, {
            left : "73%",
            bottom : "53%" ,
            scale: 1,
            duration: 0.6,
            ease: 'power2.out'
        });
    });

    document.querySelector('.advanced-reporting').addEventListener('mouseleave', () => {
        gsap.to(handLineImg, {
            bottom: "40%",
            left: "34%",
            scale: 1,
            duration: 0.5,
            ease: 'power2.in'
        });
    });
    // Elipse Chart Image card animation Script Start ************


    // Order Pick Accuracy Card Aniation Start ************
    const parentCard = document.querySelector('.order-picking-parent');

    parentCard.addEventListener('mouseenter', () => {
        gsap.timeline()
            .to('.order-picking-cards li:nth-child(1)', {
                x: 10,
                y: -5,
                left : 0 ,
                rotation: 0,
                duration: 0.3,
                ease: 'power2.out',
            })
            .to('.order-picking-cards li:nth-child(2)', {
                x: 20,
                y: -20,
                left : 20 ,
                rotation: 0,
                duration: 0.3,
                ease: 'power2.out',
            }, "-=0.2")
            .to('.order-picking-cards li:nth-child(3)', {
                x: 30,
                y: -30,
                left : 40 ,
                rotation: 0,
                duration: 0.3,
                ease: 'power2.out',
            }, "-=0.2");
    });

    parentCard.addEventListener('mouseleave', () => {
        gsap.timeline()
            .to('.order-picking-cards li:nth-child(1)', {
                x: 0,
                y: 0,
                left: 75 ,
                rotation: -12.42,
                duration: 0.3,
                ease: 'power2.in',
            })
            .to('.order-picking-cards li:nth-child(2)', {
                x: 0,
                y: 0,
                left: 116 ,
                rotation: -12.42,
                duration: 0.3,
                ease: 'power2.in',
            }, "-=0.2")
            .to('.order-picking-cards li:nth-child(3)', {
                x: 0,
                y: 0,
                left: 182 ,
                rotation: -12.42,
                duration: 0.3,
                ease: 'power2.in',
            }, "-=0.2");
    });
    // Order Pick Accuracy Card Aniation End ************


    // Real time visibility card ainimation start ************
    const visibilityCard = document.querySelector('.real-time-visibility-wrapper');

    visibilityCard.addEventListener('mouseenter', () => {
        gsap.to('.hand-line', {
            left : "76%" ,
            duration: 0.8,
            ease: 'power2.out',
        });
    });

    visibilityCard.addEventListener('mouseleave', () => {

        gsap.to('.hand-line', {
            left : "12%" ,
            duration: 0.8,
            ease: 'power2.out',
        });
    });
    // Real time visibility card ainimation End ************

</script>
<script>
    var more_industries_slider = $('.industry-specific-slider');

    $('.slide-next-button').click(function() {
        more_industries_slider.trigger('next.owl.carousel');
    });

    $('.slide-prev-button').click(function() {
        more_industries_slider.trigger('prev.owl.carousel');
    });
    $('.industry-specific-slider').owlCarousel({
        loop: true,
        autoplay:false,
        margin: 20,
        nav: false,
        stagePadding: 50,
        dots: false,
        responsive: {
            0: {
                items: 1,
                stagePadding: 1,
            },
            480: {
                items: 1
            },
            600: {
                items: 2

            },
            1400: {
                items : 2
            },
        }
    });
</script>

<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
            }
        }
    });
</script>

