<div class="template-section grey-section">
  <h1 class="heading-w-line blue-line text-center mt-4">Recommended Products</h1>
  <div class="heading-title text-center">Run any application, on any cloud to support any initiative, with Dynamic Cloud Security. The Fortinet cloud portfolio helps safeguard your apps and data in the cloud with a comprehensive security solution.</div>
  <div class="item-more-label">More items to explore</div>
  <div class=" owl-carousel owl-theme" id="recommended-products">
     <!--tile box-->
     <div class="product-tile new-arrivals">
        <i class="icon-star-outline favIcon"></i>
        <div class="tiles-icon">
           <img src="images/microsoft-icon.png">
           <h6 class="arrival-heading">Office 365 Business Premium</h6>
        </div>
        <div class="price-value">
           $10.50 <span>Per User/month</span>
        </div>
        <div class="tile-footer group-footer">
           <div class="input-group snippet-group">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="minus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Delete Quantity">
              <img src="images/minus-icon.png">
              </button>
              </span>
              <input type="text" name="quant[1]" class="form-control input-number" value="1">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="plus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Add Quantity">
              <i class="icon-plus"></i>
              </button>
              </span>
           </div>
           <button type="button" class="btn btn-primary w-50"><i class="icon-cart"></i>Add to Cart</button>
        </div>
     </div>
     <!--tile box-->
     <div class="product-tile new-arrivals">
        <i class="icon-star-outline favIcon"></i>
        <div class="tiles-icon">
           <img src="images/microsoft-icon.png">
           <h6 class="arrival-heading">Office 365 Business Premium</h6>
        </div>
        <div class="price-value">
           $10.50 <span>Per User/month</span>
        </div>
        <div class="tile-footer group-footer">
           <div class="input-group snippet-group">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="minus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Delete Quantity">
              <img src="images/minus-icon.png">
              </button>
              </span>
              <input type="text" name="quant[1]" class="form-control input-number" value="1">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="plus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Add Quantity">
              <i class="icon-plus"></i>
              </button>
              </span>
           </div>
           <button type="button" class="btn btn-primary w-50"><i class="icon-cart"></i>Add to Cart</button>
        </div>
     </div>
     <!--tile box-->
     <div class="product-tile new-arrivals">
        <i class="icon-star-outline favIcon"></i>
        <div class="tiles-icon">
           <img src="images/microsoft-icon.png">
           <h6 class="arrival-heading">Office 365 Business Premium</h6>
        </div>
        <div class="price-value">
           $10.50 <span>Per User/month</span>
        </div>
        <div class="tile-footer group-footer">
           <div class="input-group snippet-group">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="minus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Delete Quantity">
              <img src="images/minus-icon.png">
              </button>
              </span>
              <input type="text" name="quant[1]" class="form-control input-number" value="1">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="plus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Add Quantity">
              <i class="icon-plus"></i>
              </button>
              </span>
           </div>
           <button type="button" class="btn btn-primary w-50"><i class="icon-cart"></i>Add to Cart</button>
        </div>
     </div>
     <!--tile box-->
     <div class="product-tile new-arrivals">
        <i class="icon-star-outline favIcon"></i>
        <div class="tiles-icon">
           <img src="images/microsoft-icon.png">
           <h6 class="arrival-heading">Office 365 Business Premium</h6>
        </div>
        <div class="price-value">
           $10.50 <span>Per User/month</span>
        </div>
        <div class="tile-footer group-footer">
           <div class="input-group snippet-group">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="minus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Delete Quantity">
              <img src="images/minus-icon.png">
              </button>
              </span>
              <input type="text" name="quant[1]" class="form-control input-number" value="1">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="plus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Add Quantity">
              <i class="icon-plus"></i>
              </button>
              </span>
           </div>
           <button type="button" class="btn btn-primary w-50"><i class="icon-cart"></i>Add to Cart</button>
        </div>
     </div>
     <!--tile box-->
     <div class="product-tile new-arrivals">
        <i class="icon-star-outline favIcon"></i>
        <div class="tiles-icon">
           <img src="images/microsoft-icon.png">
           <h6 class="arrival-heading">Office 365 Business Premium</h6>
        </div>
        <div class="price-value">
           $10.50 <span>Per User/month</span>
        </div>
        <div class="tile-footer group-footer">
           <div class="input-group snippet-group">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="minus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Delete Quantity">
              <img src="images/minus-icon.png">
              </button>
              </span>
              <input type="text" name="quant[1]" class="form-control input-number" value="1">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="plus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Add Quantity">
              <i class="icon-plus"></i>
              </button>
              </span>
           </div>
           <button type="button" class="btn btn-primary w-50"><i class="icon-cart"></i>Add to Cart</button>
        </div>
     </div>
     <!--tile box-->
     <div class="product-tile new-arrivals">
        <i class="icon-star-outline favIcon"></i>
        <div class="tiles-icon">
           <img src="images/microsoft-icon.png">
           <h6 class="arrival-heading">Office 365 Business Premium</h6>
        </div>
        <div class="price-value">
           $10.50 <span>Per User/month</span>
        </div>
        <div class="tile-footer group-footer">
           <div class="input-group snippet-group">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="minus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Delete Quantity">
              <img src="images/minus-icon.png">
              </button>
              </span>
              <input type="text" name="quant[1]" class="form-control input-number" value="1">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="plus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Add Quantity">
              <i class="icon-plus"></i>
              </button>
              </span>
           </div>
           <button type="button" class="btn btn-primary w-50"><i class="icon-cart"></i>Add to Cart</button>
        </div>
     </div>
     <!--tile box-->
     <div class="product-tile new-arrivals">
        <i class="icon-star-outline favIcon"></i>
        <div class="tiles-icon">
           <img src="images/microsoft-icon.png">
           <h6 class="arrival-heading">Office 365 Business Premium</h6>
        </div>
        <div class="price-value">
           $10.50 <span>Per User/month</span>
        </div>
        <div class="tile-footer group-footer">
           <div class="input-group snippet-group">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="minus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Delete Quantity">
              <img src="images/minus-icon.png">
              </button>
              </span>
              <input type="text" name="quant[1]" class="form-control input-number" value="1">
              <span class="input-group-btn">
              <button type="button" class="btn btn-default btn-number" data-type="plus"
                 data-field="quant[1]" data-toggle="tooltip" data-placement="top" title=""
                 data-original-title="Add Quantity">
              <i class="icon-plus"></i>
              </button>
              </span>
           </div>
           <button type="button" class="btn btn-primary w-50"><i class="icon-cart"></i>Add to Cart</button>
        </div>
     </div>
  </div>
  <div class="row pb-3 my-5">
           <div class="col-md-12 text-center">
              <a class="" href="javascript:void(0)">See More</a>
           </div>
        </div>
</div>