{% load static %}
<!-- preloader start -->
   <div id="preloader">
      <div class="bd-loader-inner">
         <div class="bd-loader">
            <span class="bd-loader-item"></span>
            <span class="bd-loader-item"></span>
            <span class="bd-loader-item"></span>
            <span class="bd-loader-item"></span>
            <span class="bd-loader-item"></span>
            <span class="bd-loader-item"></span>
            <span class="bd-loader-item"></span>
            <span class="bd-loader-item"></span>
         </div>
      </div>
   </div>
   <!-- preloader start -->

   <!-- Back to top start -->
   <div class="backtotop-wrap cursor-pointer">
      <svg class="backtotop-circle svg-content" width="100%" height="100%" viewBox="-1 -1 102 102">
         <path d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98" />
      </svg>
   </div>
   <!-- Back to top end -->

   <!-- search area start -->
   <div class="df-search-area">
      <div class="container">
         <div class="row">
            <div class="col-xl-12">
               <div class="df-search-form">
                  <div class="df-search-close text-center mb-20">
                     <button class="df-search-close-btn df-search-close-btn"></button>
                  </div>
                  <form action="#">
                     <div class="df-search-input mb-10">
                        <input type="text" placeholder="Search for product...">
                        <button type="submit"><i class="flaticon-search-1"></i></button>
                     </div>
                     <div class="df-search-category">
                        <span>Search by : </span>
                        <a href="#">Healthline, </a>
                        <a href="#">COVID-19, </a>
                        <a href="#">Surgery, </a>
                        <a href="#">Surgeon, </a>
                        <a href="#">Medical research</a>
                     </div>
                  </form>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="body-overlay"></div>
   <!-- search area end -->

   {% comment %} side bar {% endcomment %}

   <!-- Offcanvas area start -->
   <div class="fix">
      <div class="offcanvas__info">
         <div class="offcanvas__wrapper">
            <div class="offcanvas__content">
               <div class="offcanvas__top mb-40 d-flex justify-content-between align-items-center">
                  <div class="offcanvas__logo">
                     <a href="index.html">
                        <img src="{% static 'assets/imgs/logo/logo_skinlaborganics.png' %}" alt="logo not found">
                     </a>
                  </div>
                  <div class="offcanvas__close">
                     <button>
                        <i class="fal fa-times"></i>
                     </button>
                  </div>
               </div>
               
               <div class="mobile-menu fix mb-40"></div>
               <div class="offcanvas__contact mt-30 mb-20">
                  <h4>Contact Info</h4>
                  <ul>
                     <li class="d-flex align-items-center">
                        <div class="offcanvas__contact-icon mr-15">
                           <i class="fal fa-map-marker-alt"></i>
                        </div>
                        <div class="offcanvas__contact-text">
                           <p>Meknes, Morocco </p>
                        </div>
                     </li>
                     <li class="d-flex align-items-center">
                        <div class="offcanvas__contact-icon mr-15">
                           <i class="far fa-phone"></i>
                        </div>
                        <div class="offcanvas__contact-text">
                           <a href="https://wa.me/+212{{ sites.whatsapp }}">+212 {{ sites.whatsapp }}</a>
                        </div>
                     </li>
                     <li class="d-flex align-items-center">
                        <div class="offcanvas__contact-icon mr-15">
                           <i class="fal fa-envelope"></i>
                        </div>
                        <div class="offcanvas__contact-text">
                           <a href="mailto:{{ sites.email }}"><span class="">{{ sites.email }}</span></a>
                        </div>
                     </li>
                  </ul>
               </div>
               <div class="offcanvas__social">
                  <ul>
                     <li><a href="#"><i class="fab fa-facebook-f"></i></a></li>
                     <li><a href="#"><i class="fab fa-twitter"></i></a></li>
                     <li><a href="#"><i class="fab fa-youtube"></i></a></li>
                     <li><a href="#"><i class="fab fa-linkedin"></i></a></li>
                  </ul>
               </div>
            </div>
         </div>
      </div>
   </div>
   <div class="offcanvas__overlay"></div>
   <div class="offcanvas__overlay-white"></div>
   <!-- Offcanvas area start -->

   
   <!-- Header area start -->
   <header>
      <div class="header">
         <div class="header-top-area grocery__top-header">
            <div class="header-layout-4">
               <div class="header-to-main d-none d-sm-flex">
                  <div class="link-text">
                     <span><img src="assets/imgs/icons/call.png" alt=""></span>
                     <a target="_blank" href="https://wa.me/+212{{ sites.whatsapp }}">+212 {{ sites.whatsapp }}</a>
                  </div>
                  {% comment %} <div class="header-top-notice d-none d-lg-block">
                     <p>TAKE CARE OF YOUR Health <span class="text-white">25% OFF</span> USE CODE “ DOFIX03 ”</p>
                  </div> {% endcomment %}
                  {% comment %} <div class="tp-header-top-menu d-flex align-items-center justify-content-end">
                     <div class="header-lang-item header-lang">
                        <span class="header-lang-toggle text-white" id="header-lang-toggle">English</span>
                        <ul class="">
                           <li>
                              <a class="furniture-clr-hover" href="#">Spanish</a>
                           </li>
                           <li>
                              <a class="furniture-clr-hover" href="#">Russian</a>
                           </li>
                           <li>
                              <a class="furniture-clr-hover" href="#">Portuguese</a>
                           </li>
                        </ul>
                     </div>
                     <div class="header-lang-item tp-header-currency">
                        <span class="header-currency-toggle text-white" id="header-currency-toggle">USD</span>
                        <ul>
                           <li>
                              <a class="furniture-clr-hover" href="#">EUR</a>
                           </li>
                           <li>
                              <a class="furniture-clr-hover" href="#">CHF</a>
                           </li>
                           <li>
                              <a class="furniture-clr-hover" href="#">GBP</a>
                           </li>
                           <li>
                              <a class="furniture-clr-hover" href="#">KWD</a>
                           </li>
                        </ul>
                     </div>
                     <!-- <div class="header-lang-item tp-header-setting">
                        <span class="header-setting-toggle text-white" id="header-setting-toggle">Setting</span>
                        <ul>
                           <li>
                              <a class="furniture-clr-hover" href="#">My Profile</a>
                           </li>
                           <li>
                              <a class="furniture-clr-hover" href="wishlist.html">Wishlist</a>
                           </li>
                           <li>
                              <a class="furniture-clr-hover" href="cart.html">Cart</a>
                           </li>
                           <li>
                              <a class="furniture-clr-hover" href="#">Logout</a>
                           </li>
                        </ul>
                     </div> -->
                  </div> {% endcomment %}
               </div>
            </div>
         </div>
         <div class="header-layout-4 header-bottom">
            <div id="header-sticky" class="header-4">
               <div class="mega-menu-wrapper">
                  <div class="header-main-4">
                     <div class="header-left">
                        <div class="header-logo">
                           <a href="/">
                              <img src="{% static 'assets/imgs/logo/logo_skinlaborganics.png' %}" style="height: 110px;" alt="logo not found">
                           </a>
                        </div>
                        <div class="mean__menu-wrapper furniture__menu d-none d-lg-block">
                           <div class="main-menu">
                              <nav id="mobile-menu">
                                 <ul>
                                    <li>
                                       <a href="/">Home</a>
                                    </li>
                                    {% comment %} <li class="has-dropdown">
                                       <a href="{% url 'shop' %}">Shop</a>
                                       <ul class="submenu">
                                          <li><a href="pharmacy.html">The Ordinary</a></li>
                                          <li><a href="index.html">Nivea</a></li>
                                          <li><a href="grocery.html">Make-up</a></li>
                                       </ul>
                                    </li> {% endcomment %}
                                    
                                    <li>
                                       <a href="{% url 'shop' %}">Shop</a>
                                    </li>
                                    <li>
                                       <a href="{% url 'contact' %}">Contact</a>
                                    </li>
                                 </ul>
                              </nav>
                           </div>
                        </div>
                     </div>
                     <div class="header-right d-inline-flex align-items-center justify-content-end">
                        
                        
                        <div class="header-humbager ml-30">
                           <a class="sidebar__toggle" href="javascript:void(0)">
                              <div class="bar-icon-2">
                                 <span></span>
                                 <span></span>
                                 <span></span>
                              </div>
                           </a>
                          
                        </div>
                     </div>
                  </div>
               </div>
            </div>
         </div>
      </div>
   </header>
   <!-- Header area end -->