{#
****************************************************** 
 * @package SO Framework for Opencart 3.x
 * @author  http://www.opencartworks.com
 * @license GNU General Public License
 * @copyright(C) 2008-2017 opencartworks.com. All rights reserved.
 ******************************************************
#}
<!DOCTYPE html>
<html class="no-js" dir="{{ direction }}" lang="{{ lang }}">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>{{ title }}</title>
    <base href="{{ base }}" />
    <meta name="google-site-verification" content="iIPQzg3JUEax5-xYCCKtGnZOF4lnQM1r_nFVpS4mSBs" />
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    {% if description %}<meta name="description" content="{{ description }}" />{% endif %}
    <!-- Place favicon.png in the root directory -->
   <link rel="shortcut icon" href="{{ base }}catalog/view/theme/vb/img/favicon.png" type="image/x-icon" />

    <!-- Font Icons css -->
   <link rel="stylesheet" href="{{ base }}catalog/view/theme/vb/css/font-icons.css">
    <!-- plugins css -->
   <link rel="stylesheet" href="{{ base }}catalog/view/theme/vb/css/plugins.css">
   <!-- Main Stylesheet -->
   <link rel="stylesheet" href="{{ base }}catalog/view/theme/vb/css/style.css">
   <!-- Responsive css -->
   <link rel="stylesheet" href="{{ base }}catalog/view/theme/vb/css/responsive.css">
   <!-- <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script> -->
   <script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js" type="text/javascript"></script>
   <style type="text/css">
       .ltn__header-4 .ltn__header-middle-area.sticky-active, .ltn__header-5 .ltn__header-middle-area.sticky-active,.ltn__header-4 .ltn__header-middle-area, .ltn__header-5 .ltn__header-middle-area{
        padding: 0px !important;
       }
   </style>
   <!-- Google tag (gtag.js) -->
    <script async src="https://www.googletagmanager.com/gtag/js?id=G-HGG77PWLXR"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-HGG77PWLXR');
    </script>
</head>

<body class="{{cls_body}}">
    <!-- Body main wrapper start -->
    <div class="body-wrapper">

        <!-- HEADER AREA START (header-5) -->
        <header class="ltn__header-area ltn__header-5
                ltn__header-transparent gradient-color-2">


            <!-- ltn__header-middle-area start -->
            <div style="background-color:#C15B27;text-align: center;">
                <span style="color: #F6EEE0;">Welcome To V Believers</span>
            </div>
            <div style="background-color:white;" class="ltn__header-middle-area ltn__header-sticky
                    ltn__sticky-bg-black sticky-active-into-mobile plr--9---">
                <div class="container col-12">
                    <div class="row align-items-center" style="padding: 12px 0;">
                        <div class="col-6 col-md-4 col-lg-4">
                            <div class="site-logo-wrap">
                                <div class="site-logo">
                                    <a href="{{ base }}"><img class="log" src="{{ base }}catalog/view/theme/vb/img/v-belierv-logo.png" alt="Logo"></a>
                                </div>
                            </div>
                        </div>
                        
                        <div class="col-6 col-md-8 col-lg-8 ltn__header-options
                                ltn__header-options-2 justify-content-end">
                            <!-- header-search-1 -->
                            <div class="header-search-wrap d-flex justify-content-end col-12 align-items-center">
                                <div style="position: relative;width: 66%;margin-right: 12px;" class="form_main d-none d-md-block d-lg-block  ltn__utilize-menu-search-form">
                            <form method="get" action="index.php">
                                <input type="hidden" name="route" value="product/all">
                                <input style="border-radius: 26px;border: 1px solid #c15b27;height: 40px !important;margin-top: -4px;"  type="text" name="filter" value="" placeholder="Search Product here...">
                                <button><i class="fas fa-search"></i></button>
                            </form>
                        </div>
                                <div class="d-block d-md-none d-lg-none ltn__drop-menu user-menu">
                                    {{ search }}
                              </div>
                              <div class="ltn__drop-menu user-menu">
                                 <ul>
                                    <li>
                                       <a href="javascript:void(0);"><i class="icon-shopping-cart"></i></a>
                                       <ul>
                                          <li><a href="{{shopping_cart}}">View Cart</a></li>
                                          <li><a href="{{checkout}}">Checkout</a></li>
                                       </ul>
                                    </li>
                                 </ul>
                              </div>
                              <!-- user-menu -->
                              <div class="ltn__drop-menu user-menu">
                                 <ul>
                                    <li>
                                       <a href="javascript:void(0);"><i class="icon-user"></i></a>
                                       <ul>
                                            {% if is_logged_in %}
                                                <li><a href="{{account}}">Account</a></li>
                                                <li><a href="{{logout}}">Log Out</a></li>
                                            {% else %}
                                                <li><a href="{{login}}">Log in</a></li>
                                                <li><a href="{{register}}">Register</a></li>
                                            {% endif %}
                                       </ul>
                                    </li>
                                 </ul>
                              </div>
                           </div>

                           <!-- Mobile Menu Button -->
                           <div class="mobile-menu-toggle d-xl-none">
                              <a href="#ltn__utilize-mobile-menu" class="ltn__utilize-toggle">
                                    <svg viewBox="0 0 800 600">
                                       <path d="M300,220 C300,220 520,220
                                                540,220 C740,220 640,540 520,420
                                                C440,340 300,200 300,200" id="top"></path>
                                       <path d="M300,320 L540,320" id="middle"></path>
                                       <path d="M300,210 C300,210 520,210
                                                540,210 C740,210 640,530 520,410
                                                C440,330 300,190 300,190" id="bottom" transform="translate(480, 320)
                                                scale(1, -1) translate(-480,
                                                -318) "></path>
                                 </svg>
                              </a>
                           </div>
                        </div>
                    </div>
                </div>
          
            <div style="background-color: #C15B27;">
                <div class="col header-menu-column menu-color-white">
                    <div class="header-menu d-none d-xl-block">
                        <nav>
                            <div class="ltn__main-menu container p-0 ">
                                <ul>
                                    <li><a href="{{ base }}">Home</a></li>
                                    <li><a href="{{ about }}">About Us</a></li>
                                    {% if categories|length > 0 %}
                                        {% for category in categories %}
                                            {% if category.children|length > 0 %}
                                                <li class="dropdown">
                                                    <a href="javascript:void(0);">{{ category.name }}</a>
                                                    <ul class="dropdown-menu">
                                                        <li><a href="{{ category.href }}">All</a></li>
                                                        {% for child in category.children %}
                                                            <li><a href="{{ child.href }}">{{ child.name }}</a></li>
                                                        {% endfor %}                
                                                    </ul>
                                                </li>
                                            {% else %}
                                                <li><a href="{{ category.href }}">{{ category.name }}</a></li>            
                                            {% endif %}
                                        {% endfor %}
                                    {% endif %}
                                    <li><a href="{{ branches }}">Branches</a></li>
                                    <li><a href="{{ gallery }}">Gallery</a></li>
                                    <li><a href="{{ blog }}">Blog</a></li>
                                </ul>
                            </div>
                        </nav>
                    </div>
                </div>

                <!-- Add this CSS for basic styling of the dropdown -->
                <style>
                    .header-menu ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                    }

                    .header-menu ul li {
                        position: relative;
                    }

                    .header-menu ul li a {
                        text-decoration: none;
                        padding: 10px;
                        display: block;
                        color: #fff;
                    }

                    .header-menu ul li .dropdown-menu {
                        display: none;
                        position: absolute;
                        left: 0;
                        top: 100%;
                        background-color: #C15B27;
                        min-width: 200px;
                        z-index: 99;
                        border-top:0;
                        border-radius: 0 0 4px 4px;.
                        padding-block: 10px;
                    }

                    .header-menu ul li .dropdown-menu li {
                        display: block;
                        padding: 0;
                    }

                    .header-menu ul li .dropdown-menu li a:hover {
                        color: #F6EEE0;
                        background-color:#E4B7A0;
                    }

                    .header-menu ul li .dropdown-menu li a {
                            padding: 10px 15px;
                            color: #fff;
                            background: transparent;
                    }

                    .header-menu ul li:hover .dropdown-menu {
                        display: block;
                    }

                    .header-menu ul li:hover a {
                           background-color: #E4B7A0;
                           color:#F6EEE0;
                    }
                </style>

                <!-- Optional: Add this JavaScript for hover behavior if needed -->
                <script>
                    document.querySelectorAll('.header-menu .dropdown').forEach(function (dropdown) {
                        dropdown.addEventListener('mouseover', function () {
                            this.querySelector('.dropdown-menu').style.display = 'block';
                        });

                        dropdown.addEventListener('mouseout', function () {
                            this.querySelector('.dropdown-menu').style.display = 'none';
                        });
                    });
                </script>
            </div>
          </div>
            <!-- ltn__header-middle-area end -->
        </header>
        <!-- HEADER AREA END -->


        <!-- Utilize Mobile Menu Start -->
        <div id="ltn__utilize-mobile-menu" class="ltn__utilize
                ltn__utilize-mobile-menu">
            <div class="ltn__utilize-menu-inner ltn__scrollbar">
                <div class="ltn__utilize-menu-head">
                    <div class="site-logo">
                        <a href="{{ base }}"><img src="{{ base }}catalog/view/theme/vb/img/v-belierv-logo.png" alt="Logo"></a>
                    </div>
                    <button class="ltn__utilize-close">×</button>
                </div>
                <div class="ltn__utilize-menu-search-form">
                    <form method="get" action="index.php">
                        <input type="hidden" name="route" value="product/all">
                        <input type="text" name="filter" value="" placeholder="Search here......">
                        <button><i class="fas fa-search"></i></button>
                    </form>
                </div>
                <div class="mobile-menu ltn__utilize-menu">
                    <ul>
                        <li><a href="{{ about }}">About Us</a></li>
                        {% if categories|length > 0 %}
                            {% for category in categories %}
                                {% if category.children|length > 0 %}
                                    <li class="has-submenu">
                                        <a href="javascript:void(0);" class="toggle-submenu">{{ category.name }}</a>
                                        <ul class="submenu">
                                            <li><a href="{{ category.href }}">All</a></li>
                                            {% for child in category.children %}
                                                <li><a href="{{ child.href }}">{{ child.name }}</a></li>
                                            {% endfor %}
                                        </ul>
                                    </li>
                                {% else %}
                                    <li><a href="{{ category.href }}">{{ category.name }}</a></li>
                                {% endif %}
                            {% endfor %}
                        {% endif %}
                        <li><a href="{{ branches }}">Branches</a></li>
                        <li><a href="{{ gallery }}">Gallery</a></li>
                        <li><a href="{{ blog }}">Blog</a></li>
                    </ul>
                </div>
                <script type="text/javascript">
                    document.addEventListener('DOMContentLoaded', function () {
                        const submenuToggles = document.querySelectorAll('.toggle-submenu');

                        submenuToggles.forEach(toggle => {
                            toggle.addEventListener('click', function () {
                                const parentLi = this.parentElement;
                                parentLi.classList.toggle('active');
                            });
                        });
                    });

                </script>
                <style type="text/css">
                    .mobile-menu ul {
                        list-style: none;
                        padding: 0;
                        margin: 0;
                    }

                    .mobile-menu li {
                        position: relative;
                    }

                    .mobile-menu a {
                        display: block;
                        padding: 10px;
                        text-decoration: none;
                        color: #333;
                        border-bottom: 1px solid #E4B7A0;
                    }

                    .mobile-menu .has-submenu > .submenu {
                        display: none;
                        padding-left: 20px;
                    }

                    .mobile-menu .has-submenu.active > .submenu {
                        display: block;
                    }
                </style>

                <div class="ltn__social-media-2">
                    <ul>
                        <li><a href="#" title="Facebook"><i class="fab
                                        fa-facebook-f"></i></a></li>
                        <li><a href="#" title="Twitter"><i class="fab
                                        fa-twitter"></i></a></li>
                        <li><a href="#" title="Linkedin"><i class="fab
                                        fa-linkedin"></i></a></li>
                        <li><a href="#" title="Instagram"><i class="fab
                                        fa-instagram"></i></a></li>
                    </ul>
                </div>
            </div>
        </div>

        <!-- Utilize Mobile Menu End -->
        <div class="ltn__utilize-overlay"></div>
            {% if add_breadcrumb %}
                <style type="text/css">
                    ul.breadcrumb{display: none;}
                </style>
                <!-- BREADCRUMB AREA START -->
                <div class="ltn__breadcrumb-area ltn__breadcrumb-area-2
                        ltn__breadcrumb-color-white bg-overlay-theme-black-90 bg-image" data-bg="{{ base }}catalog/view/theme/vb/img/banner/B1.png">
                    <div class="container">
                        <div class="row">
                            <div class="col-lg-12">
                                <div class="ltn__breadcrumb-inner
                                        ltn__breadcrumb-inner-2
                                        justify-content-between">
                                    <div class="section-title-area
                                            ltn__section-title-2">
                                        <h6 class="section-subtitle
                                                ltn__secondary-color">// Welcome to
                                                V Believers</h6>
                                            <h1 class="section-title white-color">Account</h1>
                                            <div class="ltn__breadcrumb-list">
                                                <ul>
                                                    <li><a href="{{base}}">Home</a></li>
                                                </ul>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- BREADCRUMB AREA END -->
            {% endif %}