@extends('website.layouts.app')
@section('title','About')
@section('content')

<!-- <style>
 .tab-wrap {
  transition: 0.3s box-shadow ease;
  border-radius: 6px;
  max-width: 100%;
  display: flex;
  flex-wrap: wrap;
  position: relative;
  list-style: none;
  background-color: #fff;
  margin: 40px 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
}


.tab {
  display: none;
}
.tab:checked:nth-of-type(1) ~ .tab__content:nth-of-type(1) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 0;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(2) ~ .tab__content:nth-of-type(2) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 0;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(3) ~ .tab__content:nth-of-type(3) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 00;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(4) ~ .tab__content:nth-of-type(4) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 0;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:checked:nth-of-type(5) ~ .tab__content:nth-of-type(5) {
  opacity: 1;
  transition: 0.5s opacity ease-in, 0.8s transform ease;
  position: relative;
  top: 0;
  z-index: 0;
  transform: translateY(0px);
  text-shadow: 0 0 0;
}
.tab:first-of-type:not(:last-of-type) + label {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.tab:not(:first-of-type):not(:last-of-type) + label {
  border-radius: 0;
}
.tab:last-of-type:not(:first-of-type) + label {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.tab:checked + label {
  background-color: #fff;
  box-shadow: 0 -1px 0 #fff inset;
  cursor: default;
}
.tab:checked + label:hover {
  box-shadow: 0 -1px 0 #fff inset;
  background-color: #fff;
}
.tab + label {
  box-shadow: 0 -1px 0 #eee inset;
  border-radius: 6px 6px 0 0;
  cursor: pointer;
  display: block;
  text-decoration: none;
     color: #0d2147;
    flex-grow: 3;
    font-weight: 700;
  text-align: center;
  background-color: #f2f2f2;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  text-align: center;
  transition: 0.3s background-color ease, 0.3s box-shadow ease;
     height: 58px;
    box-sizing: border-box;
    padding: 15px;
    font-size: 20px;
    border: 1px solid #f2f2f2;
}
.tab + label:hover {
  background-color: #f9f9f9;
  box-shadow: 0 1px 0 #f4f4f4 inset;
}
.tab__content {
  padding: 10px 25px;
  background-color: transparent;
  position: absolute;
  width: 100%;
  z-index: -1;
  opacity: 0;
  left: 0;
  transform: translateY(-3px);
  border-radius: 6px;
}
.north-region li{
  font-size: 17px;
    padding: 0 0px 4px 2px;

}
</style> -->
    <!-- start inner banner -->
    <section class="about-banner">
        <h1 class="font-weight-bold text-center">About Us</h1>
   
    </section>
    <!-- end inner banner -->
       <!-- start about us -->
    <section class="about-us mt-5" data-aos="fade-up" data-aos-duration="950">
        <div class="container">
            <div class="row">
                <div class="col-md-6">
                    <img src="{{ asset($about->image_path ?? '') }}" class="img-fluid" alt="">
                </div>
                <div class="col-md-6">
                    <div class="home_about_content text-left">

                        <h1 style="color: #0d2147;;"><b>{{ $about->title ?? '' }}</b></h1>
                        <p class="grey-font text-justify">{!! $about->description !!}</p>
                    </div>
                </div>
            </div>
        </div>
    </section>      
    <!-- end about us -->
     


<!--Start PAN INDIA PRESENCE -->
<!-- 
  <div class="container">
 <div class="sec-title text-center mb-5 mt-5">                
                <h2><span style="color: #4a4a4a;font-weight: 300;">Major</span> Ongoing Projects</h2>
            </div>
  <div class="tab-wrap">

  
     <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
    <label for="tab1">North Region</label>
    <input type="radio" id="tab2" name="tabGroup1" class="tab">
    <label for="tab2">East – Region</label>

    <input type="radio" id="tab3" name="tabGroup1" class="tab">
    <label for="tab3">West – Region</label>

    <input type="radio" id="tab4" name="tabGroup1" class="tab">
    <label for="tab4">South – Region</label>

    <div class="tab__content">
      <div class="row">
          <div class="col-lg-6">
              <ul class="north-region">
                    <li>Central Excise & Service Tax Department</li>
                  <li>IIIT Una</li>
                  <li>ITBP Campus, Jalandhar</li>
                  <li>PVR Limited</li>
                  <li>Haldiram Snacks Private Limited</li>
                  <li>IIT Roorkee</li>
                  <li>HCL Technologies</li>
                  <li>Govt. College, Kathua</li>
                  <li>HDFC Bank, Mohali</li>
                 <li>Dabur Limited</li>
                  <li>Paytm</li>
                  <li>Fortis Hospital</li>
                  <li>Sir Ganga Ram Hospital</li>
                  <li> The Oberoi Sukvilas Spa Resort</li>
              
              </ul>
          </div>
          <div class="col-lg-6">
              <ul class="north-region">
                  <li>Eros Resorts & Hotels Pvt. Ltd</li>
                  <li>ITC Grand Bharat</li>
                  <li>VR Mall, CHANDIGARH</li>
                  <li>Escorts Heart Institute and R &C Ltd</li>
                  <li>Zee Akaash News Private Limited</li>
                  <li>Mondelez India Food Limited</li>
                  <li>Hyatt Place Udyog Vihar</li>
                  <li>Relaxo Footwears Limited</li>
                  <li>Mankind Pharma Ltd.</li>
                 <li>Jupitor Laminators Pvt. Ltd.</li>
                  <li>FIL India Business</li>
                  <li> M-Worth Facilities Services Pvt. Ltd.</li>
                  <li> Blue Star Limited</li>
                  <li>Himachal Healthcare Pvt. Ltd.</li>
                  <li>Mahindra Holidays</li>
                 

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


    <div class="tab__content">
     <div class="row">
          <div class="col-lg-12">
              <ul class="north-region">
                  <li>PVR Limited</li>
                  <li>HCL Technologies</li>
                  <li>TC Sonar</li>
                  <li>PVR Limited</li>
                  <li>Airport - Kalaikunda & Bagdogra</li>
                  <li>Dabur Limited</li>
                  <li>The Oberoi Grand</li>
                  <li>Cushman & Wakefield India Pvt Ltd</li>
                  <li>Flipkart</li>
                 <li>Hewlett Packard Enterprise India Pvt Ltd</li>
                 
              
              </ul>
          </div>
          
      </div>
    </div>

    <div class="tab__content">
      <div class="row">
          <div class="col-lg-12">
              <ul class="north-region">
                    <li>PVR Limited</li>
                  <li>HCL Technologies</li>
                  <li>PSIR Dhulera, Gujarat</li>
                  <li>ITC Maratha</li>
                  <li>Airport – Rajkot</li>
                  <li>Tom Tom</li>
                  <li>JLL</li>
                  <li>Barques Hotels</li>
                  <li>Hilton Shillim Estate Retreat</li>
                 <li>Maruti Suzuki India Pvt Ltd</li>
                  <li>Hyatt Regency</li>
                 
              
              </ul>
          </div>
         
      </div>
    </div>

    <div class="tab__content">
   <div class="row">
          <div class="col-lg-12">
              <ul class="north-region">
                    <li>PVR Limited</li>
                  <li>HCL Technologies</li>
                  <li>Holiday Inn Express</li>
                  <li>Trident Cochin</li>
                  <li>The Waverly hotels /SKY DECK</li>
                  <li>Wipro Limited</li>
                  <li>Caspia Hotel Pvt Ltd</li>
                 
              
              </ul>
          </div>
      </div>
    </div>

  </div>


  
</div>
 --><!-- end PAN INDIA PRESENCE -->


<!-- Start PAN INDIA PRESENCE  -->
<!-- <section>
    <div class="container pb-5">
        <div class="row">
            <div class="col-lg-12">
                 <div class="sec-title text-center mb-5 mt-5">                
                <h2><span style="color: #4a4a4a;font-weight: 300;">PAN INDIA</span> PRESENCE</h2>
                </div>
                <div >
                    <img src="{{ asset('website') }}/images/page-banner/india-map.jpg" style="background-size: cover;width: 100%;">
                </div>
            </div>
        </div>
    </div>
</section> -->
<!-- end PAN INDIA PRESENCE  -->


        <!-- vision -->
    <section class=" mb-5 mt-5">
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    <div class="">
                        <img src="{{ asset('website') }}/images/OurVision.png" class="img-fluid" alt="">
                    </div>
                </div>
                <div class="col-lg-6">
               <div class="sec-title mb-2 mt-2">                
                <h2>Our Vision</h2>
                </div>
                   
                    <p>“To become Industry leader Globally”</p>
                </div>
            </div>
        </div>
    </section>
    <!-- end vision -->
 <!-- mission -->
    <section class="mt-5 mb-5">
        <div class="container">
            <div class="row">
                
                <div class="col-lg-6">
                  
                   <div class="sec-title mb-2 mt-2">                
                <h2> Our Mission</h2>
                </div>
                   
                  <p>
                     “To accelerate the efforts with diversified product line to achieve goals before the stipulated time”.
                  </p>
                </div>
                <div class="col-lg-6">
                      <img src="{{ asset('website') }}/images/our-Mission1.png" class="img-fluid" alt="">
                </div>
            </div>
        </div>
    </section>
    <!-- end mission -->



   


    

<!-- start team -->
<section class="our-team text-center bg-light">
        <div class="container">
            <div class="sec-title text-center mb-5">                
                <h2>Our Clients</h2>
            </div>

            <div class="owl-carousel" id="logo_carousel">
                @foreach($customerDomainLogos as $customerDomainLogo)
                <div>
                     <div class="team-block">
                        <div class="team-img">
                            <img src="{{ asset($customerDomainLogo->file_path) }}" class="img-fluid" alt="team member">
                        </div>
                    </div>
                </div>
                @endforeach


                 
            </div>
        </div>
    </section>
<!-- end team --> 




    <!-- start event gallery -->
     <section class="p-5 bg- theme-blue">
        <div class="sec-title text-center mb-3">
            <h2 class="text-white">OEM Support</h2>
        </div>
        <div class="container-fluid">
            <div class="owl-carousel" id="client_carousel">
   @foreach($Oems as $Oem)
                <div class="">
                    <img src="{{ asset($Oem->logo_path) }}" class="img-fluid">
                </div>
                @endforeach
</div>
        </div>
    </section>


    <!-- end event gallery -->

@endsection