@extends('layouts.web_app')
@section('head')

@endsection
@section('breadcrumb')
 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
 
 <!-- <div style="margin:10px;color: #808285;"   ng-bind-html="smartshop.content |trustAsHtml" > 
           </div> -->




<div style="background: rgb(243, 243, 243);"  >
  <div style="border: 0px;" class="card  container">
  <!-- 	<div class="w3-sidebar w3-bar-block w3-card  " style="display:none" id="mySidebar"> -->
 
      <div   id="sidebar" class="w3-sidebar w3-light-grey w3-bar-block">
               <h5  style="font-family:lota;font-size:17px" class="w3-bar-item">Smart Shopping</h5>
 							 
               <div  ng-repeat="(key, smartdata) in smartshop" >
                     <a href="" ng-click="gotoAnchor(key)"  class="w3-bar-item w3-button" >{$smartdata.title$}  </a>
                </div>
                 
          </div>
 
 

           
       <div class="maincontant">
         <div  ng-init=getsmartshopping() class="container">
         	<div class="vl">
              <div  class="container1" ng-init="getabout();">
            <div id="aboutus">
              <div  ng-repeat="(key, smartdata) in smartshop" id="show_{$key$}">
                <h5  style="padding-bottom:0px;margin-top: 30px" class="title" ng-bind="smartdata.title"> </h5>
                
                <div   ng-bind-html="smartdata.content |trustAsHtml" class="contant"></div>

                <hr class="line">
              </div>
            </div>
          </div>




          
        </div>
      </div>

 



    <div class="videodata" ng-init="getlink()">
  
 
 
    </div>

  

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


<style>

 body{
 	 background:rgb(243, 243, 243) 
 }
.tt-desktop-header.headerunderline {
    background: white;
}

.tt-mobile-header {
    background: white;
}


.w3-sidebar.w3-light-grey.w3-bar-block{
 width:15%;
 margin-left: -10px; 


}

.maincontant{
 margin-left:15%;
 width:85%; 
}



.line{
    margin-top: 15px;
    margin-bottom: 15px;
}
.content{
font-family: "Hind", sans-serif;
color:#777777;	
}


.title{
    font-family: "Hind", sans-serif;
 color:#191919;
}


   .pointer-event{
   	font-size: 20px;
   }

.container1{
	margin-top:20px;
	margin-bottom:20px;
 margin-left: 10px;
}
 
 .w3-sidebar {
    height: 100%;
    width: 200px;
    background-color:white!important;
    position: absolute!important;
    overflow: auto;
}
.vl{
  border-left:0.6px solid #00000061;
 
}
.w3-button:hover {
    color: green!important;
    background-color: white!important;
}
 
h5.w3-bar-item{
  color: #096;
    background-color: #E9F0DA;
    display: inline-block;
    width: 150px;
    font-size: 1px;
}


a.w3-bar-item.w3-button {
    font-size: 16px;
    font-family: "Hind", sans-serif;
    padding-left: 14px;
}
/*a#sidebaritem{
    font-size: 18px;
    font-family: "Hind", sans-serif;
    margin-left: 0px;
}*/
div p{
  font-family: "Hind", sans-serif;
    color: #777777;
    font-size:18px;

}
.card {
    position: relative;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex; /* Safari */
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
    
  flex-wrap: wrap;
    -ms-flex-direction: column;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: .25rem;

}
  @media only screen and (max-width: 1024px){
.card.container{
max-width: 80%;


}
a.w3-bar-item.w3-button {
    font-size: 13px;
    font-family: "Hind", sans-serif;
    padding-left: 14px;
}
  }

@media only screen and (max-width: 780px){
.w3-bar-block .w3-bar-item {
    width: 100%;
    display: block;
    padding: 8px 4px;
    text-align: left;
    border: none;
    white-space: normal;
    float: none;
    outline: 0;
}
 .card.container{
max-width: 80%;
	

}


button#formbutton{
  margin-left:35%;

}
a#sidebaritem{
    font-size: 14px;
    font-family: "Hind", sans-serif;
}
.content{
 font-family: "Hind", sans-serif;	
font-size: 12px;
}
div p{
 font-family: "Hind", sans-serif;
     color: #777777;
   font-size: 15px; 

}
 .w3-button:hover{
    color: green!important;
    background-color: white!important;
    
}

a.w3-bar-item.w3-button {
    font-size: 11px;
    margin-left: 0px;
     padding-left:6px;
}
.title{
 font-family: "Hind", sans-serif;
  color:#191919;
 font-size:15px;
}
}
 
 @media only screen and (max-width: 600px) {
 .card.container{
max-width: 100%;
	

}


 button#formbutton{
  margin-left:30%;
}
a.w3-bar-item.w3-button {
    font-size: 11px;
}
h5.w3-bar-item {
	font-size: 15px;
}

.w3-sidebar.w3-light-grey.w3-bar-block{
 width:20%;
 margin-left: -10px; 


}

.maincontant{
 margin-left:20%;
 width:80%; 
}

 }

</style>


@section('content')

@endsection
@include('customer.footer')

	@endsection

    @section('js')  
                        
@endsection