<?php
/*
Template Name: Restaurant
*/

get_header('new');
?>


<section class="section banner management-system-banner no-lazy">
    <div class="container">
        <div class="row">
            <div class="col-lg-6">
                <div class="text-cont">
                    <h1 class="banner-heading"><?php echo get_field('food_banner_heading');?></h1>
                    <p class="banner-content">
                        <?php echo get_field('food_banner_text');?>
                    </p>
                    <div class="banner-btns">
                        <a href="<?php echo get_field('food_banner_button_link_1');?>" class="animated-cta-btn primary">
                            <?php $button_text1 = get_field('food_banner_button_text_1');
                            echo $button_text1 ? $button_text1 : "Start Now - It's Free";
                            ?>
                            <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>
                        <a href="<?php echo get_field('food_banner_button_link_2');?>" class="border-gradient-btn animated-btn">
                            <?php $button_text1 = get_field('food_banner_button_text_2');
                            echo $button_text1 ? $button_text1 : "Get a Free Demo";
                            ?>
                            <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>
                    </div>
                </div>
            </div>
            <div class="col-lg-6 align-self-center">
                <div class="img-cont d-block text-center">
					<?php
	$desktop_img_url = get_field('food_banner_image_mobile');
	$mobile_img_url  = get_field('food_banner_image_mobile');
?>
    <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="482" class="img-fluid no-lazy" alt="Restaurant Banner">
    </picture>
                </div>
            </div>
        </div>
    </div>
</section>


<!-- Banner Logos -->
<?php 
$banner_logos = [
    'class' => 'banner-logos-3pl pb-5',
];
echo get_template_part('templates-parts/pages/banner-logos','',$banner_logos);?>
<!-- Banner Logos End -->

<section class="section what-we-do mt-5">
    <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" width="546" height="386" loading="lazy">
                </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" width="50" height="50" loading="lazy">
                        </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" width="50" height="50" loading="lazy">
                        </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" width="50" height="50" loading="lazy">
                        </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" width="50" height="50" loading="lazy">
                        </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>


<section class="section fast-and-efficient must-know top-choice-food">
    <div class="container">
        <div class="text-cont slide-down">
            <h2 class="section-title mb-4 mb-lg-5"><?php echo get_field('top_choice_section_heading');?></h2>
        </div>
        <?php if(have_rows('top_choice_cards')): ?>
        <div class="row justify-content-center gy-md-2 gy-lg-5 gy-0">
            <?php while(have_rows('top_choice_cards')): the_row();?>
            <div class="col-xl-4 col-lg-6 col-md-6 d-flex justify-content-center align-items-center px-md-4">
                <div class="card slide-right">
                    <div class="img-content d-flex justify-content-center align-items-center w-100 bg-transparent mb-4">
                        <?php echo get_sub_field('top_choice_card_icon');?>                         
                    </div>
                    <div class="text-content text-center">
                        <h3><?php echo get_sub_field('top_choice_card_heading');?></h3>
                        <p><?php echo get_sub_field('top_choice_card_desc');?></p>
                    </div>
                </div>
            </div>
            <?php endwhile;?>
        </div>
        <?php endif;?>   
    </div>
</section>

<section class="section food-and-beverage">
    <div class="container">
        <div class="text-cont slide-down">
            <h2 class="section-title text-center"><?php echo get_field('food_industry_section_heading');?></h2>
            <p class="section-content text-center"><?php echo get_field('food_industry_section_text');?></p>
        </div>

        <div class="row">
            <div class="col-md-12">
                <!-- Tabs Start Here -->
                <div class=" responsive-tabs">
                    <?php if(have_rows('food_industry_tabs')): 
                       $tab_title = 1;
                    ?>
                    <ul class="nav nav-tabs border-0" role="tablist">
                        <?php while(have_rows('food_industry_tabs')): the_row();?>
                        <li class="nav-item" role="presentation">
                            <a id="tab-<?php echo $tab_title;?>" href="#pos-<?php echo $tab_title;?>" class="nav-link <?php echo $tab_title == 1 ? 'active' : '';?>" data-bs-toggle="tab" role="tab"  aria-selected="<?php echo $tab_title == 1 ? 'true' : 'false';?>" aria-controls="pos-<?php echo $tab_title;?>">
                                <?php echo get_sub_field('food_industry_tab_name');?>
                            </a>
                        </li>
                        <?php $tab_title++;?>
                        <?php endwhile;?>
                    </ul>
                    <?php endif?>
                
                    <?php if(have_rows('food_industry_tabs')): 
                       $tab_cont = 1;
                    ?>
                    <div id="content" class="tab-content mt-3 mt-md-5">
                        <?php while(have_rows('food_industry_tabs')): the_row();?>
                        <div id="pos-<?php echo $tab_cont;?>" class="card tab-pane fade <?php echo $tab_cont == 1 ? 'show active' : '';?>" role="tabpanel" aria-labelledby="tab-<?php echo $tab_cont;?>">
                            <div class="card-header" id="food-heading-<?php echo $tab_cont;?>">
                                <div class="mb-0 py-3 py-md-0">
                                    <a data-bs-toggle="collapse" href="#pos-collapse-<?php echo $tab_cont;?>" aria-expanded="<?php echo $tab_cont == 1 ? 'true' : 'false';?>" aria-controls="collapse-<?php echo $tab_cont;?>">
                                        <?php echo get_sub_field('food_industry_tab_name');?>
                                    </a>
                                </div>
                            </div>
                            <div id="pos-collapse-<?php echo $tab_cont;?>" class="collapse <?php echo $tab_cont == 1 ? 'show' : '';?> <?php echo $tab_cont == 2 ? 'insdustry-experts-wrapper' : '';?>" data-bs-parent="#content" aria-labelledby="food-heading-<?php echo $tab_cont;?>">
                                <div class="card-body">
                                    <div class="img-cont d-none d-md-flex justify-content-center align-items-center">
                                        <img src="<?php echo get_sub_field('food_industry_image');?>" alt="feeback" class="img-fluid" loading="lazy">
                                    </div>
                                    <div class="right-card p-3">
                                        <?php echo get_sub_field('food_industry_right_box_content');?>
                                    </div>
                                    <div class="left-card p-3">
                                        <?php echo get_sub_field('food_industry_left_box_content');?>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <?php $tab_cont++;?>
                        <?php endwhile;?>
                    </div>
                    <?php endif?>
                </div>
                <!-- Tabs END Here -->
            </div>
        </div>

    </div>
</section>

<section class="section additional-features">
    <div class="container">
        <div class="text-cont slide-down">
            <h2 class="section-title text-center"><?php echo get_field('additional_features_section_heading');?></h2>
        </div>
        <div class="additional-features-content slide-up mt-3 mt-lg-5">
            <div class="row">
                <div class="col-md-12">
                    <div class="features-wrapper">
                    <?php if(have_rows('additional_features_lists')): ?>
                        <ul class="p-0">
                        <?php while(have_rows('additional_features_lists')): the_row();?>
                            <li>
                                <div class="check-svg-wrapper">
                                    <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                        xmlns="http://www.w3.org/2000/svg">
                                        <path
                                            d="M15.1797 7.83012C15.1797 12.1331 11.521 15.5882 7.11234 15.3181C3.33495 15.0866 0.260533 12.0451 0.026735 8.30822C-0.246553 3.94681 3.24604 0.327393 7.59563 0.327393C8.79025 0.327393 9.92132 0.600078 10.9274 1.08827C11.197 1.21918 11.2959 1.55137 11.1471 1.80957L11.146 1.81138C11.0085 2.04992 10.7082 2.13865 10.4593 2.01732C9.46078 1.53093 8.31925 1.29421 7.11443 1.37933C3.95005 1.6026 1.36571 4.11342 1.08406 7.23947C0.733622 11.1303 3.88545 14.396 7.76928 14.2957C11.0953 14.2098 13.8716 11.6004 14.115 8.3178C14.1783 7.46507 14.0745 6.63951 13.8276 5.87838C13.7494 5.63699 13.8632 5.37647 14.0923 5.26315C14.3784 5.12163 14.7291 5.26315 14.8261 5.56456C15.0557 6.27887 15.1797 7.04001 15.1797 7.83012Z"
                                            fill="url(#paint0_linear_2481_4668)" />
                                        <path
                                            d="M3.78006 5.88252L7.91573 11.4182C8.22798 11.8363 8.86347 11.8001 9.12682 11.3494L15.1031 1.11518C15.4143 0.582227 14.7042 0.0464284 14.2808 0.49504L8.05459 7.09278L4.44197 5.11465C3.95371 4.8474 3.44636 5.43571 3.78006 5.88252Z"
                                            fill="url(#paint1_linear_2481_4668)" />
                                        <defs>
                                            <linearGradient id="paint0_linear_2481_4668" x1="0.0117188" y1="7.83059"
                                                x2="15.1797" y2="7.83059" gradientUnits="userSpaceOnUse">
                                                <stop stop-color="#5558A6" />
                                                <stop offset="0.5" stop-color="#4AB9EA" />
                                                <stop offset="1" stop-color="#D7DF23" />
                                            </linearGradient>
                                            <linearGradient id="paint1_linear_2481_4668" x1="0.0117188" y1="7.83059"
                                                x2="15.1797" y2="7.83059" gradientUnits="userSpaceOnUse">
                                                <stop stop-color="#5558A6" />
                                                <stop offset="0.5" stop-color="#4AB9EA" />
                                                <stop offset="1" stop-color="#D7DF23" />
                                            </linearGradient>
                                        </defs>
                                    </svg>
                                </div>
                                <?php echo get_sub_field('additional_features_list_text');?>
                            </li>
                            <?php endwhile;?>
                        </ul>
                    <?php endif;?>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>


<section class="section stop-inventory free-stop-inventory">
    <div class="container">
        <div class="box slide-down">
            <h2 class="section-title"><?php echo get_field('free_demo_cta_heading');?></h2>
            <p class="section-content"><?php echo get_field('free_demo_cta_text');?></p>
            <a href="<?php echo get_field('free_demo_cta_link');?>" class="demo-btn animated-btn">
            <?php
            $cta_button_text = get_field('free_demo_cta_button_text');
            echo $cta_button_text ? $cta_button_text : 'CONTACT US'; 
            ?> 
            <svg class="ms-2" width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path d="M8.75 5.16406L11.75 7.88281C11.9062 8.00781 11.9688 8.19531 12 8.44531C12 8.63281 11.9062 8.85156 11.75 8.94531L8.75 11.7266C8.53125 11.9453 8.21875 11.9766 7.9375 11.8828C7.65625 11.7578 7.5 11.4766 7.5 11.1953V9.44531H4.75C4.3125 9.44531 4 9.13281 4 8.69531V8.19531C4 7.78906 4.3125 7.44531 4.75 7.44531H7.46875V5.69531C7.46875 5.41406 7.6875 5.13281 7.9375 5.03906C8.1875 4.91406 8.53125 4.94531 8.75 5.16406ZM8 0.445312C12.4062 0.445312 16 4.03906 16 8.44531C16 12.8828 12.4062 16.4453 8 16.4453C3.5625 16.4453 0 12.8828 0 8.44531C0 4.03906 3.5625 0.445312 8 0.445312ZM8 14.9453C11.5625 14.9453 14.5 12.0391 14.5 8.44531C14.5 4.88281 11.5625 1.94531 8 1.94531C4.40625 1.94531 1.5 4.88281 1.5 8.44531C1.5 12.0391 4.40625 14.9453 8 14.9453Z" fill="white"></path>
            </svg>
            </a>
        </div>
    </div>
</section>


<section class="section why-choose-warego">
    <div class="container">
        <div class="row gy-5">
            <div class="col-lg-6">
                <div class="img-content slide-right">
                    <img src="<?php echo get_field('why_choose_section_image');?>" alt="why-choose-warego" class="img-fluid" loading="lazy">
                </div>
            </div>
            <div class="col-lg-6">
                <div class="text-cont slide-left">
                    <div class="d-flex align-items-center gap-3">
                        <svg width="36" height="4" viewBox="0 0 36 4" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path d="M33.6211 0.844727H1.62109C0.792667 0.844727 0.121094 1.5163 0.121094 2.34473C0.121094 3.17315 0.792667 3.84473 1.62109 3.84473H33.6211C34.4495 3.84473 35.1211 3.17315 35.1211 2.34473C35.1211 1.5163 34.4495 0.844727 33.6211 0.844727Z" fill="#5956E9"/>
                        </svg>
                        <h2 class="mb-0 why-choose">Why Choose WareGo</h2>
                    </div>
                    <h2 class="section-innertitle why-choose-title mb-0 mt-2 mt-lg-4"><?php echo get_field('why_choose_section_heading');?></h2>
                    <p class="why-choose-text mt-md-1 mt-3 mt-lg-4"><?php echo get_field('why_choose_section_text');?></p>
                    <?php if(have_rows('why_choose_section_icon_list')): ?>
                    <div class="row gy-1 gy-md-4">
                    <?php while(have_rows('why_choose_section_icon_list')): the_row();?>
                        <div class="col-md-6">
                            <div class="customers-wrapper d-flex align-items-center gap-2">
                                <div class="customer-icon">
                                    <?php echo get_sub_field('why_choose_section_list_icon');?>                                      
                                </div>
                                <h3 class="mb-0"><?php echo get_sub_field('why_choose_section_list_heading');?></h3>
                            </div>
                        </div>
                    <?php endwhile;?>
                    </div>
                    <?php endif;?>


                    <div class="buttons-wrapper">
                        <a href="<?php echo get_field('why_choose_section_button_link');?>" class="demo-btn animated-btn">
                            <?php 
                            $button__text = get_field('why_choose_section_button_text');
                            echo $button__text ? $button__text : 'Start Now';
                            ?>
                             <svg class="ms-2" width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
                                <path d="M8.75 5.16406L11.75 7.88281C11.9062 8.00781 11.9688 8.19531 12 8.44531C12 8.63281 11.9062 8.85156 11.75 8.94531L8.75 11.7266C8.53125 11.9453 8.21875 11.9766 7.9375 11.8828C7.65625 11.7578 7.5 11.4766 7.5 11.1953V9.44531H4.75C4.3125 9.44531 4 9.13281 4 8.69531V8.19531C4 7.78906 4.3125 7.44531 4.75 7.44531H7.46875V5.69531C7.46875 5.41406 7.6875 5.13281 7.9375 5.03906C8.1875 4.91406 8.53125 4.94531 8.75 5.16406ZM8 0.445312C12.4062 0.445312 16 4.03906 16 8.44531C16 12.8828 12.4062 16.4453 8 16.4453C3.5625 16.4453 0 12.8828 0 8.44531C0 4.03906 3.5625 0.445312 8 0.445312ZM8 14.9453C11.5625 14.9453 14.5 12.0391 14.5 8.44531C14.5 4.88281 11.5625 1.94531 8 1.94531C4.40625 1.94531 1.5 4.88281 1.5 8.44531C1.5 12.0391 4.40625 14.9453 8 14.9453Z" fill="white"></path>
                            </svg>                                                               
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</section>


<!-- 100% Optimized WMS With 50+ Integrations Starts -->
<?php get_template_part('templates-parts/pages/optimized-integrations');?>
<!-- 100% Optimized WMS With 50+ Integrations Ends -->

<!-- industries solution section -->
<?php $args = [
    'category' => 'restaurant-new'
]; 
get_template_part('templates-parts/pages/industry-solutions',null,$args);
?>
<!-- industries solution section end -->

<section class="section real-feedbacks">
    <div class="container">
        <div class="text-cont slide-down mb-3">
            <h2 class="section-title text-center"><?php echo get_field('real_feedbacks_section_heading');?></h2>
        </div>

        <?php if( have_rows('real_feedbacks_carousel') ): 
        $i=1;    
        ?>
        <div class="owl-carousel owl-theme real-feedback-slider slide-up mt-5">
        <?php while( have_rows('real_feedbacks_carousel') ): the_row(); ?>
            <div class="item <?php echo $i == 2 ? 'mt-md-5' : '';?>">
                <div class="feebacks-wrapper">
                    <div class="card">
                        <div class="card-header">
                            <div class="img-content">
                                <img src="<?php echo get_sub_field('real_feedbacks_logo'); ?>" class="img-fluid" alt="oaks-img" loading="lazy" >
                            </div>
                        </div>
                        <div class="card-body">
                            <h2 class="feedback-title"><?php echo get_sub_field('real_feedbacks_title'); ?></h2>

                            <a href="<?php echo get_sub_field('real_feedbacks_link'); ?>" class="read-case">Read the Case Study
                                <svg class="ms-1" width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.0782 3.37729e-07L11.9096 0.485123C11.9286 0.529722 11.9575 0.574905 11.9797 0.61874C12.1543 0.962829 12.2294 1.35746 12.3264 1.73197L12.7369 3.31951L13.8161 7.49143L14.3753 9.65392C14.5582 10.3611 14.9 11.0969 14.3305 11.7147C14.1108 11.9496 13.8062 12.088 13.4842 12.0992C12.2879 12.1522 12.1735 10.897 11.9504 10.0328L11.1593 6.96786C11.0303 6.46815 10.9085 5.95406 10.7619 5.46371C10.6475 5.08122 10.1532 4.99273 9.92783 5.3468C9.71785 5.6767 9.52239 6.0147 9.32387 6.34967L8.10103 8.41315L4.05867 15.2377L3.28203 16.5486C3.12217 16.8182 2.9692 17.1283 2.76183 17.3638C2.54598 17.609 2.25452 17.7573 1.92696 17.7757C1.59438 17.7944 1.24172 17.633 0.997642 17.4122C0.724442 17.165 0.578821 16.7263 0.660981 16.3647C0.759312 15.9321 1.88107 14.1624 2.18512 13.65L5.95167 7.29424L7.17955 5.21882C7.37848 4.88297 7.58715 4.55353 7.77726 4.21198C7.93871 3.92188 7.93117 3.64624 7.61379 3.48187C7.5673 3.45778 7.4815 3.43054 7.42877 3.43778C7.00889 3.49528 6.58476 3.62429 6.1723 3.73086L2.86452 4.58785C2.56395 4.66576 1.57166 4.94416 1.29977 4.963C0.974942 4.98713 0.654675 4.87861 0.412913 4.66249C0.166094 4.44812 0.0176001 4.14313 0.0013423 3.81724C-0.0248283 3.30714 0.334576 2.76825 0.834024 2.62023C1.35938 2.46452 1.90356 2.33287 2.43472 2.19397L5.62633 1.35831L8.89512 0.497735C9.50219 0.337324 10.5022 0.0292867 11.0782 3.37729e-07Z" fill="black"/>
</svg>                                 
                            </a>

                            <div class="divider"></div>

                            <div class="brand-feedback">
                                <p><?php echo get_sub_field('real_feedbacks_text'); ?></p>
                                <div class="owner-name">
                                    <h3><?php echo get_sub_field('real_feedbacks_owner_name'); ?></h3>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <?php $i++;?>
            <?php endwhile; ?>
        </div>
        <?php endif; ?>
</section>

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


<!-- contact form -->
<?php get_template_part('templates-parts/pages/contact-form');?>
<!-- contact form -->


<?php get_footer('new'); ?>
<script defer src="<?php echo get_template_directory_uri();?>/assets/js/food-beverage-section.js"></script>


<script>
    // industry specific slider
    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
            },
        }
    });
    
    $('.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
            }
        }
    });

    
    // *********************** Optimized Warehouse Gsap Animation Start ***********************
    gsap.registerPlugin();

    function startCircularScroll(wrapper, scrollSpeed) {
    const originalContent = wrapper.innerHTML; 
    wrapper.innerHTML += originalContent;

    const totalHeight = wrapper.scrollHeight / 2;

    const duration = totalHeight / scrollSpeed;

    gsap.to(wrapper, {
        y: `-${totalHeight}px`,
        duration: duration, 
        ease: "linear",
        repeat: -1,
    });
    }

    const firstSlideWrapper = document.querySelector('.first-slide-wrapper');
    const thirdSlideWrapper = document.querySelector('.third-slide-wrapper');

    if (firstSlideWrapper) {
    startCircularScroll(firstSlideWrapper, 30);
    }
    if (thirdSlideWrapper) {
    startCircularScroll(thirdSlideWrapper, 30);
    }


    const secondSlideWrapper = document.querySelector('.second-slide-wrapper');

    function startSeamlessTopToBottomScroll(wrapper, scrollSpeed) {
        
    const duplicate = wrapper.innerHTML;
    wrapper.innerHTML += duplicate;

    const totalHeight = wrapper.scrollHeight / 2;

    const duration = totalHeight / scrollSpeed;

    gsap.fromTo(
        wrapper,
        { y: `-${totalHeight}px` }, 
        {
        y: 0, 
        duration: duration,
        ease: "linear", 
        repeat: -1,
        }
    );
    }

    if (secondSlideWrapper) {
    startSeamlessTopToBottomScroll(secondSlideWrapper, 30);
    }
    // *********************** Optimized Warehouse Gsap Animation End ***********************
</script>