<?php
require_once("header.php");
require_once("menu.php");
?>

<style type="text/css">
/** Akash Css*/
.supply-chain-service.desc {
    padding: 20px 10px !important;
    border: 2px solid #2c2a2ab8 !important;
    margin:10px;
}

h2.titlemain {
    text-transform: uppercase;
    font-size: 38px;
    font-weight: bold;
}

.rs-performance .items .glyph-icon:after {
    border: 2px solid #ff6c39;
    border-radius: inherit;
    content: "";
    height: 138px;
    left: -10px;
    position: absolute;
    top: -11px;
    width: 138px;
    z-index: -1;
}

.rs-performance .items:after {
    background: #243a4f none repeat scroll 0 0;
    content: "";
    height: 2px;
    position: absolute;
    right: -30%;
    top: 60px;
    width: 48%;
}

/** akash end*/


.get-traffic::after {
  background: #d85a2e;
}
.get-traffic .apper-content.hireus .readon {
  color: #fff;
  border-color: #fff;
}
.fas.fa-globe{
  font-size: 25px !important;
}
.supply-chain-service i{
  font-size: 35px !important;
  color: #ff6c39;
}

.supply-chain-service li {
  list-style: disclosure-closed;
}
.row.supply-chain-desc {
  margin-top: 48px;
}
.supply-chain-desc h3 {
  color: #ff6c39;
  }
.supply-chain-desc h4 {
  color: #fff;
}
div#supply-chain .service-box h4 {
    color: #ff6c39;
    padding-left: 10px;
padding-right: 10px;
}
/*.our-facility-title {*/
/*  background: #08084e;*/
/*  padding-top: 10px;*/
/*  padding-bottom: 10px;*/
/*}*/
.facility-carousel .partner-item {
  background:#243a4f;
  padding-bottom: 10px;
  
  margin: 1px;
}
.facility-carousel h5 {
    color: #fff;
    text-align: center;
    font-size: 16px;
    padding-top: 10px;
}
.facility-carousel .partner-item img {
  max-width: 100%;
}
.rs-partner.sec-spacer.our-facility {
  background: #fff;
}
.read-more-btn {
  text-align: center;
}
.we-provide {
  padding-top: 50px !important;
  padding-bottom: 50px !important;
}
.we-provide .service-box {
    background: #fff !important;
}
.section-title.service {
  text-align: center;
  padding-bottom: 35px !important;
}
/* Magic mouse */

.intro .mouse {
    color: #fff;
    z-index: 999;
    position:absolute;
    width:26px;
    height:40px;
    border:1px solid #fff;
    border-radius:13px;
    background:transparent;
    bottom:30px;
    margin:0 auto;
    left:0;
    right:0;
    -webkit-transition:all 0.3s;
       -moz-transition:all 0.3s;
            transition:all 0.3s;
}

.intro .mouse a {
    display:block;
    width:26px;
    height:40px;
}

.intro .mouse .wheel {
    position:absolute;
    display:block;
    width:8px;
    height:8px;
    background:#fff;
    border-radius:50%;
    margin-left:auto;
    margin-right:auto;
    top:6px;
    left:0;
    right:0;
    -webkit-animation:magic-mouse 1.7s infinite ease;
       -moz-animation:magic-mouse 1.7s infinite ease;
            animation:magic-mouse 1.7s infinite ease;
}

@keyframes magic-mouse {
    0% {
        top:6px;
        opacity:0;
    }
    
    30% {
        opacity:1;
    }
    
    100% {
        top:18px;
        opacity:0;
    }
}

.typewrite{
    color: #fff;
    
    }
    @media only screen and (max-width: 767px){
.section-title.service {
    padding-bottom: 0 !important;
}
}

</style>
   <!-- Slider Section Start Here -->
        <div class="slider-main">
            <div id="main-slider" class="owl-carousel">
                 <?php
                  $ex = $obj->get_home_slider();
                  while($row=mysqli_fetch_array($ex))
                  {
                  ?>
                <div class="item">
                    <img src="<?php echo $row['home_slider_bg'];?>" alt="slider image">
                    <div class="inner-slider">
                        <div class="dsc wow fadeInUp">
                           <h2 class="abhishek-slider" data-animation-in="slideInRight" data-animation-out="animate-out fadeOut" >
                           <?php echo $row['title'];?> <div class="typewrite" data-period="2000" data-type='["<?php echo $row['subtitle'];?>" ]'><span class="wrap"></span></div>
                         </h2>
                            <P data-animation-in="zoomIn" data-animation-out="animate-out fadeOutLeft"><?php echo $row['home_slider_text'];?> </P> 
                            <div class="btn-slider"> 
                             <!--<a href="#" class="readon yellow mr-25" data-animation-in="slideInUp" data-animation-out="animate-out fadeOutUp">GET STARTED</a>-->
                        </div>
                    </div>
                    </div>
                </div>
              <?php } ?>
            </div>
        </div>
        <!-- Slider Section end Here -->


<!---- Supply Chain System Section Start---->
<div id="rs-performance" class="rs-performance sec-spacer">
            <div class="container">
                 <div class="section-title service text-center">
					<h2 class="titlemain">Ethics <sapn class="text-primary">Supply Chain </sapn>System</h2>
				 </div>
            </div>
            <div class="container">
				<div class="row">
				
					<?php
								$ex = $obj->view_home_supply_chain();
								while($row=mysqli_fetch_array($ex))
								{
								?>
					
					<div class="col-lg-2 col-md-2 col-sm-3 wow fadeInUp" data-wow-duration=".3s" data-wow-delay="300ms" style="visibility: visible; animation-duration: 0.3s; animation-delay: 300ms; animation-name: fadeInUp;">
						<div class="items">
							<div class="outer-line"><div class="<?php echo $row['supply_chain_icon'];?>"></div></div>
							<h3><?php echo $row['supply_chain_title'];?></h3>
							</div>
					</div>
					
					<?php } ?>
				 </div>
			</div>
        </div>
<!-- Supply Chain System Section End-->




<!-- START ETHICS AT A GLANCE Section-->

<div id="ethics-glance" class="ethics-glance">
    <div class="container">
        <div class="glance-inner">
            <div class="section-title service text-center">
            <h2>Ethics at a <sapn class="text-primary">Glance</sapn></h2>
            </div>
            <div class="row">
			
							<?php
							    $ex = $obj->view_ethics_glance();
								while($row=mysqli_fetch_array($ex))
								{
								    ?>
								    
                <div class="col-md-4 col-lg-4 col-sm-6">
                   <div class="glance-box">
                            <div class="details">
                               
                                    <h3><span class="count"><?php echo $row['ethics_glance_number'];?></span></h3>    
                             <p><?php echo $row['ethics_glance_text'];?></p>
                            </div>
                            <div class="icon">
                                <i class="<?php echo $row['ethics_glance_icon'];?>"></i>
                            </div>
                    </div>
                </div>
                    <?php } ?>
                    
            </div>
        </div>
    </div> 
</div>
<!-- END ETHICS AT A GLANCE section-->

<!--- Services Section Start---->
<div id="home-service-section" style="background: white;">
    <div class="container">
        <div class="row">
             <div class="col-lg-12 col-sm">
                 <div class="section-title service">
                     <h2>WHAT <sapn class="text-primary">SERVICES</sapn> WE OFFER</h2>
                     </div>
             </div>
             <div class="col-lg-12 col-sm">
                 <div class="row">
                  <?php
                  $i=0;
                  $ex = $obj->view_homeservice_info();
                  while($row=mysqli_fetch_array($ex))
                  {
                  ?>
                  <?php
                  $i++;
                  if($i<=4)
                  {
                  ?>
                  <div class="col-md-3 col-sm-6">
                       <?php
                  }
                  else
                  {
                  ?>
                   <div class="col-md-4 col-sm-6">
                  <?php
                  }
                  ?>
                 
                         <div class="service-box" data-aos="fade-up">
                              <div class="row">
                                  <div class="col-md-12">
                                      <img src="<?php echo $row['hs_simg'];?>" alt="Services">
                                      <h4 class="text-primary text-center" id="sertitle"><?php echo $row['hs_stitle'];?></h4>
                                      <div class="read-more-btn">
                                          <a href="<?php echo $row['service_url'];?>" class="readmore-btn">Read More  <i class="fas fa-long-arrow-alt-right"></i></a>
                                      </div>
                                  </div>
                              </div>
                         </div>
                     </div>
                 
                     
                     
                     
                   <?php } ?>
                </div>
             </div>
        </div>
    </div>
</div>

<!--- Services Section End---->

<!-- Video Section Start---->

<section class="video">
    <?php
$ex = $obj->view_video_section();
    $row = mysqli_fetch_array($ex);
?>
    <video  class="vidak"  controls="true" autoplay="autoplay" loop="true" muted defaultmuted playsinline >
      <source src="<?php echo $row['home_video'];?>" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    
    <div class="container">
        <div class="row">
            <div class="col-lg-4 col-md-4 col-sm-6">
                <div class="infrastructure-box ">
                   
                    <?php echo $row['home_video_text'];?>
                </div>
            </div>
        </div>
    </div>
    
</section>

       <!-- Video Section End -->

<!-- end to end supply chain  Start-->
<div id="supply-chain" class="supply-chain" style="background: white;">
    <div class="container">
        <div class="row">
        <div class="col-lg-12 col-md-12 col-sm wow fadeInRight">
            <div class="section-title">
                <h1  style="color: black;"><center><sapn class="text-primary">End to End</sapn> Supply Chain <sapn class="text-primary">Management</sapn></center></h1>
            </div>
        </div>
           <div class="col-lg-12 col-md-12 col-sm wow fadeInLeft">
               <div class="supply-chain-service clearfix">
			         <div class="row supply-chain-desc">
                    <?php
                    $sr=0;
                    $ex = $obj->view_home_end_to_end();
                    while($row=mysqli_fetch_array($ex))
                    {
                    ?>
                       <div class="col-lg-2 col-md-2 col-sm-4">
			                   <div class="supply-chain-service desc" data-aos="fade-up">
                          <!-- <i class="<?php //echo $row['h_end_icon'];?>"></i> -->
                          <img src="<?php echo $row['h_end_icon'];?>" alt="icon" class="img-responsive text-center">
			                     <h3><?php echo $row['h_end_title'];?></h3>
                             </div>
			              </div> 
                    
			                <?php } ?>
			               </div>
        			     </div>
        		   </div>
          </div>
      </div>
  </div>
<!-- end to end supply chain End -->

<!-- What makes Ethics supply Start-->
<?php
                  $ex = $obj->view_what_make_section();
                  while($row=mysqli_fetch_array($ex))
                  {
                  ?>
<div id="get-traffic" class="get-traffic" style="background-image: linear-gradient(to right,#00080de0, #ffffff00), url(<?php echo $row['what_make_bg_img'];?>) !important;">
    <div class="row">
                <div class="col-lg-6 col-md-6 col-sm-6"></div>
                   <div class="col-lg-6 col-md-6 col-sm-6" id="bgpad">
						<div class="apper-content hireus">
							<h2 class="white-color"><?php echo $row['what_make_title'];?></h2>
							<?php echo $row['what_make_text'];?>
                        </div>
				   </div>
                </div>
</div>
 <?php } ?>
<!-- What makes Ethics supply Start End -->




<!-- Partner Logo Slider Start -->
        <div id="rs-partner" class="rs-partner sec-spacer">
            <div class="container wow fadeInUp">
              
                <div class="partner-carousel owl-carousel">
                  <?php
                    $ex = $obj->get_Slider_logo();
                    while($row=mysqli_fetch_array($ex))
                    {
                    ?>
                    <div class="partner-item" >
                        <img src="<?php echo $row['logo_slider_img'];?>" alt="Partner Image">
                    </div>
                    <?php } ?>
                </div>
            </div>
        </div>
        <!-- Partner Logo Slider End -->

<?php
require_once("footer.php");
?>

<script>
    var TxtType = function(el, toRotate, period) {
        this.toRotate = toRotate;
        this.el = el;
        this.loopNum = 0;
        this.period = parseInt(period, 10) || 2000;
        this.txt = '';
        this.tick();
        this.isDeleting = false;
    };

    TxtType.prototype.tick = function() {
        var i = this.loopNum % this.toRotate.length;
        var fullTxt = this.toRotate[i];

        if (this.isDeleting) {
        this.txt = fullTxt.substring(0, this.txt.length - 1);
        } else {
        this.txt = fullTxt.substring(0, this.txt.length + 1);
        }

        this.el.innerHTML = '<span class="wrap">'+this.txt+'</span>';

        var that = this;
        var delta = 200 - Math.random() * 100;

        if (this.isDeleting) { delta /= 2; }

        if (!this.isDeleting && this.txt === fullTxt) {
        delta = this.period;
        this.isDeleting = true;
        } else if (this.isDeleting && this.txt === '') {
        this.isDeleting = false;
        this.loopNum++;
        delta = 500;
        }

        setTimeout(function() {
        that.tick();
        }, delta);
    };

    window.onload = function() {
        var elements = document.getElementsByClassName('typewrite');
        for (var i=0; i<elements.length; i++) {
            var toRotate = elements[i].getAttribute('data-type');
            var period = elements[i].getAttribute('data-period');
            if (toRotate) {
              new TxtType(elements[i], JSON.parse(toRotate), period);
            }
        }
        // INJECT CSS
        var css = document.createElement("style");
        css.type = "text/css";
        css.innerHTML = ".typewrite > .wrap { border-right: 0.08em solid #fff}";
        document.body.appendChild(css);
    };
    </script>
  