MOON
Server: Apache
System: Linux e2e-78-16.ssdcloudindia.net 3.10.0-1160.45.1.el7.x86_64 #1 SMP Wed Oct 13 17:20:51 UTC 2021 x86_64
User: imensosw (1005)
PHP: 7.4.33
Disabled: exec,passthru,shell_exec,system
Upload Files
File: /home/imensosw/www/imenso.co/imenso-case-study-powerbi/kalle/index_old.php
<!doctype html>
<html lang="en">
<head>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Case study</title>

  <link rel="icon" type="image/png" href="../images/favicon.ico">

  <!-- Bootstrap CSS -->
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous" />
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet" /> 
  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"  media="all"> 
  <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />
  <link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
  <link rel='stylesheet' href='css/styles.css?v=2'  media='all' />
</head>
<body>
  <nav class="navbar fixed-top">
    <div class="container">
      <a class="navbar-brand" href="#"><img src="images/brand-logo.png" alt="logo"/></a>
      <div class="ms-auto">
        <a href="javascript:;" class="btn btn-bordered js-action">Discuss a Project</a> 
      </div>
    </div>
  </nav>

  <section class="t-burger banner1">
    <div class="container">
      <div class="row">
        <div class="col-md-10 mx-auto text-center mt-5 cs-main-heading">
          <div class="banner_sub d-flex mt-4 justify-content-center">
            <span class="shade">Case study</span>            
          </div>
          <h1 class="mt-4">Data visualization tool for shipping industry.</h1>
          <ul class="cs-client-info">
            <li>Industry: <strong>Marine/Shipping  Industry</strong></li>
            <li>Country: <strong>Sweden</strong></li>
          </ul>
        </div>
      </div>
    </div>
  </section>

  <section class="b-burger pt-5  ">
    <div class="container ">
      <div class="row cs-banner-img ">
        <div class="col-lg-12 mx-auto">
          <img src="images/Shipping-main7.png" class="img-fluid" alt="image">
      </div>
      </div>
    </div>
  </section>

 

  <section class="b-burger custom_bg">  
    <div class="container">
      <div class="row">
        <div class="col-md-10 mx-auto">
          <div class="">
        <p class="text-big-2">The objective of creating a business intelligence dashboard for the shipping industry is to equip professionals with <span class="underline-2"> actionable insights, streamline decision-making processes, and improve  the overall efficiency </span> of shipping operations through strategic utilization of data visualization and analytics.</p>
           
            
          </div>
        </div>
        <div class="col-xl-8 col-md-10 mx-auto common">
          <h4 class="mt-5 mb-4 fw-bold">The core challenges.</h4>
          <!-- <p>Solving slow data retrieval performance issues and customising data models to meet specific business needs.</p> -->
          <ul class="inner_list main_points pt-3">
              <li><span class="high_black">Data Integration: </span> Shipping companies face challenges managing vast data. Historical data is downloaded from websites into CSV files and organized. An incremental refresh mechanism optimizes API data management for timeliness and stability.</li>

              <li><span class="high_black">Real-time Data Processing: </span>Shipping operations necessitate real-time monitoring for efficient vessel scheduling, route optimization, and cargo handling.
              For processing large real-time data creates aggregated data pipelines and efficient query.
              </li>

              <li><span class="high_black">Predictive Analytics: </span> We utilize line chart forecasting, incorporating smoothed historical data to predict vessel performance, maintenance needs, fuel consumption, and arrival times. This is crucial for optimizing operations and reducing costs.</li>

              <li><span class="high_black"> Regulatory Compliance: </span> Shipping industry faces regulatory requirements concerning safety, security, emissions, and environmental protection.
              Incorporating regulatory compliance metrics in Power BI reports.
              </li>

              <li><span class="high_black">Data Security and Privacy: </span> For enhanced security, we implement Row Level Security (RLS) to filter sensitive data such as vessel positions, cargo details, and customer data based on specific criteria, ensuring confidentiality and protection. </li>             

             

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

  <section class="burger">  
    <div class="container">
      <div class="row">
        <div class="col-md-10 mx-auto">
         
          <p class="text-big-2"><span class="sm_main_heading primary_heading">Solution</span>
          We have developed an advanced data visualization tool tailored for the shipping industry, designed to represent intricate operational data in a user-friendly format. <span class="underline-2"> This tool is equipped with a versatile range of charts </span> specifically curated to visually   represent shipping data, providing enhanced clarity and facilitating  easier interpretation for industry professionals.
          </p>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-8 col-md-10 mx-auto common pb-4 icon_shadow">
          <ul class="key_points ps-2 mt-5 icon_shadow">
            <li>
              <div>
                <div class="key_points_icon"><img src="images/shipping-data1.png" class="img-fluid"></div>
                <div class="">
                  <span class="high_black">Data Integration with Incremental Refresh : </span> Historical data is downloaded from relevant websites into CSV files and organized into a separate folder. An incremental refresh mechanism is enabled for API data, this approach optimizes data management, ensuring a balance between timeliness and stability.
                </div>
              </div>
            </li>
            <li>
              <div>
                
                <div class="key_points_icon"><img src="images/shipping-Predictive.png" class="img-fluid"></div>
                <div class="">
                  <span class="high_black">Predictive Analytics with Line Chart: </span>To predict vessel performance, maintenance requirements, fuel consumption, and arrival times, we utilize a line chart forecasting feature. This feature incorporates smoothed historical data to generate accurate predictions.
                </div>
              </div>
            </li>
            <li>
              <div>
              <div class="key_points_icon"><img src="images/shipping-filters1.png" class="img-fluid"></div>
                <div class="">
                  <span class="high_black"> Filters and Slicers: </span>Filtering and slicing data to focus on specific subsets of information within reports and dashboards.
              </div>
            </li>
            <li>
              <div>
              <div class="key_points_icon"><img src="images/shipping-level1.png" class="img-fluid"></div>
                <div class="">
                  <span class="high_black">Row Level Security: </span>For enhanced security, we implement Row Level Security (RLS), which involves filtering data based on specific criteria.
              </div>
            </li>
            <li>
              <div>
              <div class="key_points_icon"><img src="images/reports-1.png" class="img-fluid"></div>
                <div class="">
                  <span class="high_black"> Embed  Reports: </span>Embed reports and dashboards into custom applications or websites for broader consumption.
              </div>
            </li>
            </ul>
        </div>
      </div>
    </div>
  </section>



  <section class="burger cc_gray_bg1">  
    <div class="container">
      <div class="row info-section">
        <div class="col-md-10 mx-auto">
          <h2 class="big-heading"><span class="primary_heading">Integration.</span> <br>Equipped with a variety of <br> data source.</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-md-6 offset-md-1 common">
          <!-- <p>Integration enables organizations to streamline processes, improve data accessibility, enhance decision-making, and create more efficient workflows. To create this report, we've leveraged the following integration capabilities::</p> -->
        </div>
      </div>
      <div class="row">
        <div class="col-md-10 mx-auto common">
          <div class="row">
            <div class="col-md-6 " >
              <p>Integration enables organizations to streamline processes, improve data accessibility, enhance decision-making, and create more efficient workflows. To create this report, we've leveraged the following integration capabilities:</p>
              <div class="dotted_pionts">
                <!-- <h5>FusionCharts.</h5> -->
                <div class="row mt-4">
                  <div class="col-sm-12">
                    <ul class="key_points_red">
                      <li>SQL Server</li>
                      <li>Web</li>
                      <li>CSV files </li>
                      <li>External sources like APIs or web services</li>
                      <li>Shared Cloud Storage</li>
                    </ul>
                  </div>
                  
                </div><!--inner-ul-row--->
              </div>
            
            </div>
            <div class="col-md-5 offset-md-1 text-center mt-4 mt-md-0">
              <img src="images/integration-shipping14.png" class="img-fluid" alt="image" >
            </div>
          </div><!--inner-row--> 
        </div>
      </div>
    </div>
  </section>

 
 
  <section class="t-burger cc_bg2 b-burger">  
    <div class="container">
      <div class="row info-section">
        <div class="col-md-10 mx-auto">
          <h2 class="big-heading"><span class="text-yellow">Customization.</span> <br>How we played with charts. </h2>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-8 col-md-10 mx-auto common_white">
          <p class="text-big mb-0">We didn't just add the charts; <span class="text-white">  we made them special to show data better, </span> making sure each chart looks just right for its purpose.</p>
        </div>  
      </div>
    </div>
  </section> 

  <!-- <section class="burger cc_bg2">  
    <div class="container solution_points small_heading">
      <div class="row common_white">
        <div class="col-lg-6 my-3">
          <div class="card rounded-4">
            <div class="sol_img">
              <img src="images/Shipping-Condition7.png" class="card-img-top w-75" alt="image">
            </div>
            <div class="card-body sol_des">
              <h5 class="card-title">Condition Formatting</h5>
              <p>Dynamic modifications such as <span class="text-white"> changing the background colors of rows  </span> based on specific conditions.</p>
            </div>
          </div>
        </div>

        <div class="col-lg-6 my-3">
          <div class="card rounded-4">
            <div class="sol_img">
              <img src="images/Shipping-top2.png" class="card-img-top w-75" alt="image" />
              
            </div>
            <div class="card-body sol_des">
              <h5> TOP filter  </h5>
              <p>Offered insights into  <span class="text-white"> top clients for both the current </span> period and overall period.</p>
            </div>
          </div>
        </div>
      </div>
      <div class="row common_white">
        <div class="col-lg-6 my-3">
          <div class="card rounded-4">
            <div class="sol_img">
              <img src="images/Shipping-drill1.png" class="card-img-top w-75" alt="image">
            </div>
            <div class="card-body sol_des">
              <h5 class="card-title"> Drill-Down</h5>
              <p>Incorporated hierarchical structures into <span class="text-white"> drill-down functionalities </span> for enhanced understanding.</p>
            </div>
          </div>
        </div>

        <div class="col-lg-6 my-3">
          <div class="card rounded-4">
            <div class="sol_img">
              <img src="images/Shipping-page1.png" class="card-img-top w-75" alt="image" />
              
            </div>
            <div class="card-body sol_des">
              <h5> Page Navigation  </h5>
              <p>Provided seamless <span class="text-white"> page navigation with filter  application </span> to navigate through selected data subsets.</p>
            </div>
          </div>
        </div>
      </div>
   
    </div>
  </section> -->

  <section class="service mobile_burger cc_bg2 b-burger ">
  <div class="container-fluid ">
    <div class="row ">
      <div class="col-lg-6 service__sidebars px-0 pb-0 " >
      <img src="images/enhancement-shipping124.png" class="" alt="image" style=" border-radius: 0px 10px 10px 0px;" >
      </div>



      <div class="col-lg-5 px-5 ">            
        <div class="service__wrapper">
             
      
      <div class="container">
      <div class=" service__wrapper-item " data-aos="fade-up">
      <div class="row  ">
      <p> <span style="font-size:21px ;font-weight:800 ; color:#fff;" > Condition Formatting </span ></p>
      <p> <span style="color:#dbdbdb"> Dynamic modifications such as changing the background colors of rows based on specific conditions. </span></p>
      <hr style="height:2px; margin-top:30px">
      </div>
      </div>

      <div class=" service__wrapper-item " data-aos="fade-up">
      <div class="row  mt-4 ">
      <p> <span style="font-size:21px ;font-weight:800 ; color:#fff;" > TOP filter </span></p>
      <p> <span style="color:#dbdbdb"> Offered insights into top clients for both the current period and overall period. </span></p>
      <hr style="height:2px; margin-top:35px">
      </div>
     </div>

      <div class=" service__wrapper-item " data-aos="fade-up">
      <div class="row  mt-4 ">
      <p> <span style="font-size:21px ;font-weight:800 ; color:#fff;"  > Drill-Down </span></p>
      <p><span style="color:#dbdbdb"> Incorporated hierarchical structures into drill-down functionalities for enhanced understanding. </span>
      </p>
      <hr style="height:2px; margin-top:35px">
      </div>
      </div>

      <div class=" service__wrapper-item " data-aos="fade-up">
      <div class="row  mt-4 ">
      <p> <span style="font-size:21px ;font-weight:800 ; color:#fff;" > Page Navigation </span></p>
      <p><span style="color:#dbdbdb"> Provided seamless page navigation with filter application to navigate through selected data subsets.  </span></p>
      </div>
      </div>
  </div>
          
      </div>
    </div>
  </div>
</section>


  <section class="t-burger">  
    <div class="container">
      <div class="row info-section">
        <div class="col-md-10 mx-auto">
           <h2 class="big-heading"><span class="primary_heading">Enhancement.</span> <br> By adding useful features.</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-8 col-md-10 mx-auto common">
          <p class="text-big mb-0">To make the app better and give  users a cooler experience,  <span class="high_black"> we've added lots of stuff</span> so you can easily play with charts and data. </p>
        </div>
      </div>
    </div>
  </section>

  <section class="burger">  
    <div class="container">
        <div class="row">
          <div class="col-md-10 mx-auto">
            <div class="row common small_heading align-items-center">
              <div class="col-md-6 col-lg-5 mb-4 mb-md-0">
                <h5 class=""> Bookmarks</h5>
                <p>dynamic chart views through bookmarks, enabling users to seamlessly switch between different chart representations based on the selection of actionable buttons, all within the same canvas.</p>
              </div>
              <div class="col-md-6 offset-lg-1 text-center">
                <img src="images/Bookmark-Shipping9.png" class="img-fluid cc-img" alt="image">
              </div>
            </div>
          </div>
        </div><!---/row--->
        <div class="row t-burger">
          <div class="col-md-10 mx-auto">
            <div class="row common small_heading align-items-center">
              <div class="col-md-6 col-lg-5 offset-lg-1 mb-4 mb-md-0">
                <h5 class=""> Tooltips </h5>
                <p>Tooltip have been strategically utilized to provide detailed analysis information, maintaining proper filter context for enhanced insights.</p>
              </div>
              <div class="col-md-6 order-md-first">
                <img src="images/Tooltips-Shipping7.png" class="img-fluid" alt="image">
              </div>
              
            </div>
          </div>
        </div><!---/row--->
        <div class="row t-burger">
          <div class="col-md-10 mx-auto">
            <div class="row common small_heading align-items-center">
              <div class="col-md-6 col-lg-5 mb-4 mb-md-0">
                <h5 class=""> Page and Report Level Filters</h5>
                <p>Utilized both Page and Report Level Filters, users can now filter pages and visuals according to specific requirements, ensuring a tailored viewing experience.</p>
              </div>
              <div class="col-md-6 offset-lg-1 text-center">
                <img src="images/Page and Report-Shipping1.png" class="img-fluid cc-img" alt="image">
              </div>
            </div>
          </div>

          
        </div><!---/row--->
        <div class="row t-burger">
          <div class="col-md-10 mx-auto">
            <div class="row common small_heading align-items-center">
              <div class="col-md-6 col-lg-5 offset-lg-1 mb-4 mb-md-0">
                <h5 class="">Synchronizing slicers</h5>
                <p>Synchronized slicers across all pages, users can effortlessly navigate through the data while maintaining consistent filtering across different visualizations, facilitating a cohesive analytical journey.</p>
              </div>
              <div class="col-md-6 order-md-first">
                <img src="images/Synchronizing -Shipping2.png" class="img-fluid" alt="image">
              </div>
              
            </div>
          </div>
        </div><!---/row--->
        <div class="row t-burger">
          <div class="col-md-10 mx-auto"> 
            <div class="row common small_heading align-items-center">
              <div class="col-md-6 col-lg-5 mb-4 mb-md-0">
                <h5 class=""> Embedded the report</h5>
                <p>Embed the report into the web application, making it easily accessible and seamlessly integrated into the user's workflow. This empowers users to access and interact with the report directly within the application environment, enhancing usability and accessibility.</p>
              </div>
              <div class="col-md-6 offset-lg-1 text-center">
                <img src="images/Embedded-Shipping2.png" class="img-fluid cc-img" alt="image">
              </div>
            </div>
          </div>

          
        </div><!---/row--->
    </div>
  </section>

  <section class="t-burger cc_gray_bg1">  
    <div class="container">
      <div class="row info-section">
        <div class="col-md-10 mx-auto">
           <h2 class="big-heading"><span class="primary_heading">Export.</span> <br> Preferred charts/KPIs.</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-xl-8 col-md-10 mx-auto common">
          <!-- <p class="mb-0">With the export feature, users can easily tidy up their data and save it.
          There are <span class="high_black"> several methods to export a BI report. </span> Here's a list of common export methods
          </p> -->
        </div>
      </div>
    </div>
    <!-- <div class="container mx-auto col-lg-7"style="padding: 50px 0;">
      <div class="row cs-banner-img ">
        <div class="col-lg-10 mx-auto px-4">
          <img src="images/charts KPIs-Shipping3.png" class="img-fluid" alt="image">
      </div>
      </div>
    </div>

    <div class="container mx-auto col-lg-7 b-burger" >
      <div class="row"style="text-align:center; font-size:18px; font-weight:600;">
        <div class="col-2">PDF </div>
        <div class="col-2">Power Point</div>
        <div class="col-2">Excel</div>
        <div class="col-2">CSV</div>
        <div class="col-2">Web</div>
        <div class="col-2">Service API</div>
      </div>
    </div> -->
  </section>

  <!-- <section class="burger cc_gray_bg1">  
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6 ps-0 d-none d-md-block">
            <div class="h-100 position-relative">
              <div class="bg-holder" style="background-image: url('images/charts KPIs-Shipping3.png');"></div>
            </div>
        </div>
        <div class="col-12 d-md-none">
          <img src="images/muhakemat-2.png" class="img-fluid mb-4" alt="image">
        </div>
        <div class="col-md-6 common">
          <div class="h-100 row small_heading">
            <div class="col-xl-7 offset-lg-1 col-lg-9">
              <div class="vertical_features ">
                <h6>PDF </h6>
                
              </div>
              <div class="vertical_features mt-5">
                <h6>Power Point</h6>
                
              </div>
              <div class="vertical_features mt-5">
                <h6>Excel </h6>
               
              </div>
              <div class="vertical_features mt-5">
                <h6>CSV</h6>
               
              </div>
              <div class="vertical_features mt-5">
                <h6>Web</h6>
                
              </div>
              <div class="vertical_features mt-5">
                <h6>Service API </h6>
                
              </div>
             </div>
        </div>
        </div>
      </div>
    </div>
  </section> -->


  <section class="b-burger pt-5  cc_gray_bg1">  
    <div class="container-fluid">
      <div class="row">
        <div class="col-md-6  p-0 d-none d-md-block">
            <div class="h-100 position-relative">
              <div class="bg-holder " style="background-image: url('images/charts KPIs-Shipping4.jpg');"></div>
            </div>
        </div>
        <!-- <div class="col-12 d-md-none">
          <img src="images/muhakemat-2.png" class="img-fluid mb-4" alt="image">
        </div> -->
        <div class="col-md-6 common " >
          <div class="h-100 row small_heading">
            <div class="col-xl-7 offset-lg-1 col-lg-12">

            <p class="mb-0">With the export feature, users can easily tidy up their data and save it.
          There are several methods to export a BI report. <span class="high_black">Here's a list of common export methods</span> 
          </p>

            <!-- <div class="mt-3 " style=" font-size:19px; font-weight:500" >
              <div class="col mb-2">PDF</div>
              <div class="col mb-2">Power Point</div>
              <div class="col mb-2">Excel</div>
              <div class="col mb-2">CSV</div>
              <div class="col mb-2">Web</div>
              <div class="col mb-2">Service API</div>
              </div> -->


              <div class=" mt-4">
                    <ul class="key_points_red ps-3">
                      <li class="pb-1">PDF</li>
                      <li class="pb-1">Power Point</li>
                      <li class="pb-1">Excel</li>
                      <li class="pb-1">CSV</li>
                      <li class="pb-1">Web </li>
                      <li class="pb-1">Service API</li>
                    </ul>
              </div>
           

            
              
            

            
             
            
              

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



  

  

  <section class="t-burger">  
    <div class="container">
      <div class="row info-section">
        <div class="col-md-10 mx-auto">
          <h2 class="big-heading cs_mobile_mb"><span class="primary_heading">Explore more. </span><br>Additional features.</h2>
        </div>
      </div>
    </div>
  </section>

  <section class="burger">  
    <div class="container">
      <div class="row">
        <div class="col-md-10 mx-auto common icon_shadow_2">
          <div class="row">
            <div class="col-md-6 pe-md-5 mb-4 mb-md-0">
            <img src="images/Scheduled-2.png" class="img-fluid feature_icon" alt="icon">
                <p><span class="high_black">Implementing Scheduled Data Refreshes.</span>This report's implementation of schedule data refresh ensures that the shipping information
                is regularly updated, maintaining its relevance and accuracy over time. 
                </p>
            </div>
            <div class="col-md-6 ps-md-5 mb-4 mb-md-0">
                <img src="images/Performance Indicators-1.png" class="img-fluid feature_icon" alt="icon">
                <p><span class="high_black">Key Performance Indicators.</span>Incorporated a diverse array of Key Performance Indicators (KPIs) tailored to systematically assess and boost the efficiency, effectiveness, and overall performance of shipping operations. </p>
            </div>
          </div>
          
          <div class="row mt-md-5">
            <div class="col-md-12 pe-md-5 mb-4 mb-md-0">
                <img src="images/ui-1.png" class="img-fluid feature_icon" alt="icon">
              <p><span class="high_black">Improving the User Experience with Customized UI.</span> To enhance accessibility and functionality for the shipping industry, it was necessary to refine the visual layout, incorporating intuitive navigation components and optimizing interactive features for smoother user engagement.  </p>
            </div>
            
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- <section class="">
    <div class="container-fluid p-0">
        <img src="images/muhakemat-15.png" class="img-fluid" alt="image" style="border-radius: 0;">
    </div>
  </section> -->


  <section class="burger cc_gray_bg1">
    <div class="container">
      <div class="row">
        <div class="col-xl-8 col-lg-10 text-center mx-auto">
          <h2 class="big-h2">Looking to build similar <br>solution for your business?</h2>
          <p class="mt-4">We have all the required expertise to help your business grow</p>
          <div class="mt-5">
            <a href="https://www.imensosoftware.com/contact/" class="btn btn-primary">Get a Quote</a>
          </div>
        </div>
      </div>    
    </div>
  </section>

  <footer class="">
    <div class="text-center copyright border-top"> Copyright © Imenso Software. All Rights Reserved. </div>
  </footer>

  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
  <!-- Swiper -->
  <script src="../js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
  <!--AOS-->
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script>
    AOS.init();
  </script>

  <script>
    var swiper = new Swiper(".slideswipe", {
      slidesPerView: 4,
      spaceBetween: 15,
      loop:"true",
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
      breakpoints: {
        400: {
          slidesPerView: 1,
          spaceBetween: 20,
        },
        640: {
          slidesPerView: 2,
          spaceBetween: 20,
        },
        991: {
          slidesPerView: 3,
          spaceBetween: 40,
        },
        1024: {
          slidesPerView: 4,
          spaceBetween: 50,
        },
      },
    });
  </script>

  <script type="text/javascript">
      /*Top Menu*/
    $(document).ready(function () {

      $(window).scroll(function () {
          // alert(1);
        $('.navbar').toggleClass("navbar-sml", ($(window).scrollTop() > 100));
      });
    });

      /*Review*/
    var swiper = new Swiper(".testimonial_review", {
      loop: true,
      slidesPerView: "auto",
      centeredSlides: true,
      spaceBetween: 30,
        // pagination: {
      //     el: ".swiper-pagination",
      //     clickable: true,
        // },
      autoplay: {
        delay: 3500,
        disableOnInteraction: false,
      },
      navigation: {
        nextEl: ".swiper-button-next",
        prevEl: ".swiper-button-prev",
      },
    });

 
</script>



<script type="text/javascript">
  var swiper = new Swiper('.slides', {
    loop: true,
      centeredSlides: true,
      slidesPerView: 'auto' ,
      pagination: {
        el: '.swiper-pagination',
        clickable: true
        },
         breakpoints: {
        1024: {
          slidesPerView: 1,
        }
      },
        navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
      },
    });

</script>



</body>
</html>