   <div class="section-before-after section-padding">
       <div class="container-fulid">
           <!--Start Container-->
           <div class="title fade_bottom">
               <h2 style="color: #fff">
                   <span>{{ __('website.before_and_after') }}</span>
                   
               </h2>
           </div>
           <div class="row">
               @foreach ($beforafter as $index => $item)
                   <div class="col-md-4 fade_bottom">
                       <div class="twentytwenty-container" id="compare{{ $index + 1 }}" data-aos="fade-up" data-aos-delay="{{ ($index + 1) * 100 }}">
                           <img src="{{ $item->before_image_path }}" alt="{{ __('website.before') }}" />
                           <img src="{{ $item->after_image_path }}" alt="{{ __('website.after') }}" />
                       </div>
                   </div>
               @endforeach
           </div>
       </div>
   </div>
