/home/henzagold/oldsite/pages/ Current File: //home/henzagold/oldsite/pages/index.vue
<template>
  <div>
    <mobile-menu :toggleMobile="toggleMobile"/>
    <!-- Header Start -->
    <header class="acr-header">
      <!-- Topbar -->
     <RandomText />
      <!-- Middle sec -->
      <div class="middle-header">
<!--        <div class="container-fluid">
          <div class="row align-items-center" style="flex-direction: row-reverse">
            <div class="col-lg-3 col-4" style="padding: unset">

              <img src="/img/henza.svg" alt="هنزاگلد" style="width:19.375rem" class="hide-on-mobile" />
              <div class="mobile-logo">
                <a href="/">
                  <logo height="120px" width="130px" />
                </a>
              </div>
            </div>
            <div class="col-lg-9 col-8">


              <div class="middle-navigation">
                <nav class="hide-on-mobile">
                  <ul class="main-navigation">
                    <li class="menu-item menu-item-has-children active" v-for="(item,index) in menu" :key="index">
                      <a :href="menu[index].is_master ? `/shop/${menu[index].title.split(' ').join('-')}/${menu[index].id}` : `#`" :title="item.meta">{{ menu[index].title }}</a>
                      <ul class="sub-menu" v-if="menu[index].childs.length>0">
                        <li class="menu-item" v-for="(itemChild,index) in menu[index].childs">
                          <a :href="`/shop/${itemChild.title.split(' ').join('-')}/${itemChild.id}`" :title="itemChild.meta">{{ itemChild.title }}</a>
                        </li>
                      </ul>
                    </li>







                  </ul>
                </nav>
                <ul style="display: flex;align-items: center;">


                  <li class="aside-toggler aside-trigger" style="margin-left:25px" @click="toggleMobile">
                    <span></span>
                    <span></span>
                    <span></span>
                  </li>
                  <li class="mt-2">
                    <a  href="/customer" style="color:#21284e;">


                      <svg style="width:28px;height:28px" viewBox="0 0 24 24">
                        <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" />
                      </svg>
                    </a>
                  </li>
                  <li style="margin-right:30px">

                    <cart />
                  </li>
                </ul>
                <div class="searchbar hide-on-mobile d-lg-none d-xl-flex" style="display:flex;align-items: center;margin-right:30px">
                  <form action="/shop" method="get">
                    <div class="input-group">
                      <input style="width: 200px;" autocomplete="off" type="text" name="search" class="form-control" placeholder="جستجو...">
                      <div class="input-group-append">
                        <button type="submit">
                          <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                            <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
                          </svg>

                        </button>
                      </div>
                    </div>
                  </form>
                </div>
              </div>
            </div>

          </div>
        </div>-->
        <nav class="navbar justify-start">

        <div class="navbar-item logo mobile-fx-div" >
          <!-- Logo -->
          <a class="navbar-brand" href="/">
            <logo width="220px"/>
          </a>
        </div>
        <div class="navbar-item nav d-flex mobile-fx-div flex-1" >

          <nav-bar class="hide-on-mobile"/>
          <div class="searchbar hide-on-mobile d-lg-none d-xl-flex px-[20px] flex-1" style="display:flex;align-items: center;=">
            <form action="/shop" method="get" class="w-full">
              <div class="input-group">
                <input style="width: 200px;" autocomplete="off" type="text" name="search" class="form-control" placeholder="جستجو...">
                <div class="input-group-append">
                  <button type="submit">
                    <svg style="width:24px;height:24px" viewBox="0 0 24 24">
                      <path fill="currentColor" d="M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z" />
                    </svg>

                  </button>
                </div>
              </div>
            </form>
          </div>
          <div class="header-controls" >
            <!-- Toggler -->
            <div class="aside-toggler aside-trigger mobile-fx-asside" style="margin-right:5px;margin-left:20px" @click="toggleMobile">
              <span></span>
              <span></span>
              <span></span>
            </div>
            <div class="px-[20px] mobile-fx-px hidden sm:block">
              <a href="/customer" style="color:#21284e">
                <svg style="width:28px;height:28px" viewBox="0 0 24 24">
                  <path fill="currentColor" d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,6A2,2 0 0,0 10,8A2,2 0 0,0 12,10A2,2 0 0,0 14,8A2,2 0 0,0 12,6M12,13C14.67,13 20,14.33 20,17V20H4V17C4,14.33 9.33,13 12,13M12,14.9C9.03,14.9 5.9,16.36 5.9,17V18.1H18.1V17C18.1,16.36 14.97,14.9 12,14.9Z" />
                </svg>
              </a>
            </div>
            <div class="position-relative px-[20px] mr-[20px] mobile-fx-px">
              <cart />
            </div>
          </div>
        </div>
        <!-- Jewelry -->
      </nav>
      </div>
      <!-- Bottom sec -->
<!--      <div class="bottom-header">
        <div class="container-fluid"  >
          <div class="bottom-navigation">
              <BrandBar />
          </div>
        </div>
      </div>-->
    </header>
    <div class="banner banner-1 banner-3 dark-overlay bg-cover bg-center" style="min-height: 326px" :lazy-background="bg">
      <div class="container" style="min-height: 528px">
        <div class="row banner-row align-items-center">
          <div class="col-lg-8">
            <div class="banner-item">
              <div class="banner-inner">
                <div class="banner-text">
                </div>
              </div>
            </div>
          </div>
          <div class="col-lg-4" v-show="$store.state.windowWidth > 425">
<!--            <slick :slidesToShow="1" container="banner-slider"
                   :arrows="false" :responsive="undefined"
                   :autoplay="true"
                   :dots="true">
              <product v-for="(item,index) in random" :product="item" :key="item.id" class="product_slider" v-model="model"/>
            </slick>-->
          </div>
        </div>
      </div>
    </div>
    <div class="section section-padding dark-bg" style="padding: 0;">
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="box item1">
              <div class="cta-body hover_image">
<!--                <img src="/img/box/04.webp" alt="هفت روز ضمانت بازگشت" class="img_hover" />
                <img src="/img/box/4.jpg" alt="هفت روز ضمانت بازگشت" class="img_main m-auto"  />-->
                <img src="/img/box_new/zemanatbazgasht.svg" class="box-icon" alt="هفت روز ضمانت بازگشت"  />
                <h5 class="box-text ">هفت روز ضمانت بازگشت</h5>
              </div>
            </div>
          </div>
<!--          <div class="col-lg-3 col-md-3 col-sm-3 col-3">
            <div class="box item2">
              <div class="cta-body hover_image">
&lt;!&ndash;                  <img src="/img/box/02.webp" alt="ارسال رایگان" class="img_hover" />
                  <img src="/img/box/2.jpg" alt="ارسال رایگان" class="img_main m-auto" />&ndash;&gt;
                <img src="/img/box_new/ersal.svg" class="box-icon" alt="ارسال رایگان"  />
                <h5 class="box-text" >ارسال رایگان</h5>
              </div>
            </div>
          </div>-->
          <div class="col-lg-4 col-md-4 col-sm-4 col-4">
            <div class="box item1">
              <div class="cta-body hover_image">
<!--               <img src="/img/box/03.webp" alt="گارانتی مادام العمر" class="img_hover" />
                <img src="/img/box/3.jpg" alt="گارانتی مادام العمر"  class="img_main m-auto" />-->
                <img src="/img/box_new/garanty.svg" class="box-icon" alt="گارانتی مادام العمر"  />
                <h5 class="box-text ">گارانتی مادام العمر</h5>
              </div>
            </div>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4 col-4 ">
            <div class="box item1">
              <div class="cta-body hover_image">
<!--                <img src="/img/box/05.webp" alt="ضمانت اصالت کالا" class="img_hover" />
                 <img src="/img/box/5.jpg" alt="ضمانت اصالت کالا" class="img_main m-auto" />-->
                <img src="/img/box_new/zemanatesalat.svg" class="box-icon" alt="ضمانت اصالت کال"  />
                <h5 class="box-text ">ضمانت اصالت کالا</h5>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="spacer spacer-lg spacer-bottom "></div>
    </div>
    <!-- Header end   -->

<!--    category    -->
    <div class="section py-4">
      <div class="container section-title-wrap section-header">
        <h5 class="custom-primary ">دسته ها</h5>
        <h2 class="title">انتخاب دسته بندی</h2>
      </div>
      <div class="pt-1 flex overflow-x-auto flex-nowrap lg:flex-wrap no-scrollbar m-0 lg:m-auto lg:container px-[15px] lg:px-0">
        <div  class="flex-[0_0_250px] sm:flex-[0_0_350px] lg:flex-none lg:w-1/3 px-0 mx-[8px] md:mx-0 md:px-[15px]" :class="`${categories[item] && $store.state.mobileHideCats && $store.state.mobileHideCats.includes(item) ? 'hide-on-mobile' : ''}`" v-for="item in customCats">
          <div class="acr-category" v-if="categories[item]">
            <div class="acr-category-thumb">
              <div class="img-sec">
                <img :alt="categories[item].title" :src="categories[item].icon?categories[item].icon.image:categories[item].parent_id_id && categories[categories[item].parent_id_id].icon?categories[categories[item].parent_id_id].icon.image:'/img/no-image.png'" width="35px" height="35px" />
              </div>
              <a :href="`/shop/${categories[item].title}/${item}`"><img :src="categories[item].image?categories[item].image.image:'/img/no-image.png'" :alt="categories[item].title" class="cat"></a>
              <div class="acr-category-body center">
                <h5  class=""> <a :href="`/shop/${categories[item].title}/${item}`">{{ categories[item].title }}</a> </h5>
                <span>{{ categories[item].total }} محصول</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
<!--    category    -->

    <!-- suggestion Products -->
    <SuggestionProducts :products="offer"/>
    <!-- suggestion Products -->


<!--    video  light-bg  -->
    <div class="section section-padding faq-style-2 " style="padding-top:20px">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-xl-6 col-lg-7">
            <div class="faq-image ">
              <video  controls :poster="baseURL+'download/henza_app_demo_cover.jpg'" style="object-fit:cover;width: 100%; border-radius: 4px; height: 70vh" >
                <source :src="baseURL+'download/henza.mp4'" type="video/mp4" >
                مرورگز شما بارگذاری فایل را پشتیبانی نمی کند
              </video>
            </div>
          </div>
          <div class="col-xl-6 col-lg-5">
            <div class="faq-content-wrapper">
              <div class="section-title-wrap section-header" style="padding-top: unset">
                <h5 class="custom-primary ">سوالات متداول</h5>
                <h2 class="title">قبل از شروع همه چیز باید بدانید.</h2>
              </div>
              <div class="accordion with-gap" id="faqAccordions2">
                <div class="card">
                  <div class="card-header" data-toggle="collapse" role="button" data-target="#faqFour" aria-expanded="true" aria-controls="faqFour">
                   چگونه می توانیم محصول خریداری نماییم ؟
                  </div>
                  <div id="faqFour" class="collapse show" data-parent="#faqAccordions2">
                    <div class="card-body">
                      <p class="mb-0">
                        شما می توانید پس از انتخاب محصول مورد نظرتان، سفار شتان را ثبت کنید. پس از ثبت
                        درخواست شما، اگر چنانچه محصول درخواستی شما موجود باشد ظرف 24 ساعت در اختیار شما قرار خواهد
                        گرفت و اگر موجود نباشد، حداکثر تا 14 روز کار درخواست شما از کارخانه دریافت و تحویل شما خواهد شد.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" data-toggle="collapse" role="button" data-target="#faqFive" aria-expanded="false" aria-controls="faqFive">
                    آیا محصولات خریداری شده دارای برگه ضمانت می باشد ؟
                  </div>
                  <div id="faqFive" class="collapse" data-parent="#faqAccordions2">
                    <div class="card-body">
                      <p class="mb-0">
                        کلیه محصولات ارایه شده دارای ضمانت طلای 750 ، 7 روز مهلت بازگشت و همچنین ضمانت
                        تعمیر به صورت مادام العمر خواهد بود.
                      </p>
                    </div>
                  </div>
                </div>
                <div class="card">
                  <div class="card-header" data-toggle="collapse" role="button" data-target="#faqSix" aria-expanded="false" aria-controls="faqSix">
                   آیا می توان محصولی با طراحی منحصر بفرد سفارش دهیم ؟
                  </div>
                  <div id="faqSix" class="collapse" data-parent="#faqAccordions2">
                    <div class="card-body">
                      <p class="mb-0">
                        شما می توانید درخوا ست طراحی مورد نظرتان را برای ما ار سال فرمایید تا پس از
                        بررسی و برآورد، طلای خاص مورد نظرتان را تولید و دریافت نمایید.
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="col-12">
            <a href="https://www.instagram.com/henzagoldgallery/" target="_blank" @click="addCounter">
              <img :src="banner['instagram']" class="lg:hidden mt-[20px] rounded-[4px]">
            </a>
          </div>
        </div>
      </div>
    </div>
<!--    video   -->

    <!-- Feartures Products Start -->
<!--    <div class="section container">
      <div class="section-title-wrap section-header">
        <div class="section-title-text">
          <h5 class="custom-primary ">محصول انحصاری هنزاگلد</h5>
          <h2 class="title">محصولات ویژه هنزاگلد</h2>
        </div>
      </div>
      <div class="row">
        <div class="col-lg-4 col-md-6">
          <featured-product v-model="model" v-for="(item,index) in featured_products['service']" :key="index" :product="item" />
        </div>
        <div class="col-lg-4 col-md-6">
          <featured-product v-model="model" v-for="(item,index) in featured_products['gardanband']" :key="index" :product="item" />
        </div>
        <div class="col-lg-4 col-md-6">
          <featured-product v-model="model" v-for="(item,index) in featured_products['goshvare']" :key="index" :product="item" />
        </div>
      </div>
    </div>-->
    <!-- Feartures Products end   -->

<!--    baner   -->
    <div class="section" style="padding-top: 1rem" >
      <div class="container">
        <div class="row">
          <div class="col-lg-4 col-md-6 category_box">
            <a :href="getBannerLink('tag1')">
              <img class="w-full" :src="banner['tag1']" alt="تخفیفات و جشنواره ها" style="border-radius: 4px" />
            </a>
          </div>
          <div class="col-lg-4 col-md-6 category_box">
            <a :href="getBannerLink('tag2')">
              <img class="w-full" :src="banner['tag2']" alt="عاشقانه ها" style="border-radius: 4px" />
            </a>
          </div>
          <div class="col-lg-4 col-md-6 category_box">
          <a :href="getBannerLink('tag3')">
             <img class="w-full" :src="banner['tag3']" alt="هدایای هنزا" style="border-radius: 4px" />
           </a>
          </div>
        </div>
<!--        <div class="col-lg-12 " style="margin:1.5rem 0 3rem 0;padding: 0">
          <a :href="getBannerLink('1')">
            <img :src="banner['1']" alt="کالکشن" style="border-radius: 3px;" />
          </a>
        </div>-->
      </div>
    </div>
<!--    baner   -->

<!--    top products   -->
    <div class="section about-style-2">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-lg-12">
            <div class="section-title-wrap section-header">
             <h4 class="title text-white text-center">منظومه ای کم نظیر برای خاص پسندان<span class="custom-primary"></span></h4>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="section section-padding pt-0">
      <div class="spacer dark-bg"></div>
      <div class="container">
        <div class="row">
          <!-- Product Start -->
          <div class="col-lg-4" v-for="(item,index) in top_products" :key="index">
            <product :product="item" v-model="model" :key="item.id"/>
          </div>
        </div>
      </div>
    </div>
<!--    top products   -->








<!--     Feartures Products End-->
<!--    <div class="section dark-bg pb-0">
      <div class="container">
        <div class="section-title-wrap section-header text-center">
          <h5 class="custom-primary">تنوع های مختلف</h5>
          <h2 class="title text-white">ارزان ترین محصولات</h2>
        </div>
      </div>
    </div>
    &lt;!&ndash; Product-tab-box Start &ndash;&gt;
    <div class="section section-padding pt-0">
      <div class="spacer dark-bg"></div>
      <div class="container">
        <div class="product-tab-wrapper">
          <ul class="nav nav-tabs border-0 row">
            <li class="nav-item col-lg-2 col-sm-4 col-6">
              <a href="#pro1" data-toggle="tab" class="nav-link active">
               <svg width="65px" height="65px" viewBox="0 0 384 480.18"><g id="Layer_2" data-name="Layer 2"><g id="Capa_1" data-name="Capa 1"><path d="M192,184A128,128,0,1,0,320,312,128.14,128.14,0,0,0,192,184Zm0,240A112,112,0,1,1,304,312,112,112,0,0,1,192,424Z"/><rect y="48" width="48" height="16"/><rect x="20" y="-5.54" width="16" height="43.08" transform="translate(2.75 36.05) rotate(-68.2)"/><rect x="6.46" y="88" width="43.08" height="16" transform="translate(-33.63 17.25) rotate(-21.78)"/><rect x="336" y="48" width="48" height="16"/><rect x="334.45" y="7.98" width="43.08" height="16" transform="translate(19.49 133.25) rotate(-21.78)"/><rect x="347.98" y="74.48" width="16" height="43.08" transform="translate(134.61 390.88) rotate(-68.2)"/><path d="M347.33,248.13A168,168,0,0,0,256,156.8V112a7.94,7.94,0,0,0-4.33-7l34.62-44.06c.13-.17.2-.37.32-.56a6.7,6.7,0,0,0,.45-.6c.07-.14.09-.29.16-.44a9.94,9.94,0,0,0,.35-1,7,7,0,0,0,.37-2.12,10.84,10.84,0,0,0,0-1.14,6.78,6.78,0,0,0-.19-1A7.15,7.15,0,0,0,287.4,53c-.07-.17-.09-.35-.17-.51s-.2-.28-.29-.44-.14-.34-.24-.5l-32-48a8.27,8.27,0,0,0-.61-.7q-.3-.37-.63-.72a6.93,6.93,0,0,0-1.07-.8,5.36,5.36,0,0,0-.55-.38,7.08,7.08,0,0,0-1.18-.47,6.23,6.23,0,0,0-.8-.27,6.93,6.93,0,0,0-1-.12A8,8,0,0,0,248,0H136c-.28,0-.54.08-.8.1a9.31,9.31,0,0,0-1.06.14c-.25.06-.48.17-.73.25a7.37,7.37,0,0,0-1.2.49c-.19.1-.35.24-.54.36a7.54,7.54,0,0,0-1.08.8,5.86,5.86,0,0,0-.61.71,7.1,7.1,0,0,0-.63.71l-32,48c-.1.16-.15.34-.25.5s-.21.28-.28.44-.1.34-.17.51a7.15,7.15,0,0,0-.35,1.11,6.78,6.78,0,0,0-.19,1,8.69,8.69,0,0,0,0,1.14,7,7,0,0,0,.37,2.12,9.94,9.94,0,0,0,.35,1c.07.15.09.3.16.44a6.7,6.7,0,0,0,.45.6,5.09,5.09,0,0,0,.32.56L132.34,105a7.94,7.94,0,0,0-4.34,7v44.8a168,168,0,1,0,219.33,91.33ZM210.9,131,230,64h33.5ZM240,152H214.75l25.14-32Zm-48-13.13-8.3-29.07L170.61,64h42.78l-2.21,7.76Zm57-115L265.06,48H236.94ZM235.06,16,223,40.09,206.94,16Zm-26,32H174.94L192,22.4Zm-32-32L161,40.09,148.94,16ZM135,23.9,147.06,48H118.94ZM120.46,64H154l19.14,67Zm48.79,88H144V120Zm22.81,312.06A152,152,0,0,1,143.5,168h97a152,152,0,0,1-48.44,296.06Z"/></g></g></svg>
                <br/>
                <span class="fw-500" style="display: inline-block;margin-top:10px">انگشتر ها</span>
              </a>
            </li>
            <li class="nav-item col-lg-2 col-sm-4 col-6">
              <a href="#pro2" data-toggle="tab" class="nav-link">
               <svg  width="65px" height="65px" viewBox="0 0 512 480.03"><path d="M504,472.05H8a8,8,0,0,1-8-8v-176a8,8,0,0,1,8-8H504a8,8,0,0,1,8,8v176A8,8,0,0,1,504,472.05Zm-488-16H496v-160H16Z" transform="translate(0 -16.01)"/><path d="M104,496.05H8a8,8,0,0,1-8-8v-24a8,8,0,0,1,16,0v16H96v-16a8,8,0,1,1,16,0v24A8,8,0,0,1,104,496.05Z" transform="translate(0 -16.01)"/><path d="M504,496.05H408a8,8,0,0,1-8-8v-24a8,8,0,1,1,16,0v16h80v-16a8,8,0,1,1,16,0v24A8,8,0,0,1,504,496.05Z" transform="translate(0 -16.01)"/><path d="M8,72a8,8,0,0,1-8-8A48.05,48.05,0,0,1,48,16a8,8,0,1,1,0,16A32,32,0,0,0,16,64,8,8,0,0,1,8,72Z" transform="translate(0 -16.01)"/><path d="M504,72a8,8,0,0,1-8-8,32,32,0,0,0-32-32,8,8,0,0,1,0-16,48.05,48.05,0,0,1,48,48A8,8,0,0,1,504,72Z" transform="translate(0 -16.01)"/><path d="M464,32H48a8,8,0,0,1,0-16H464a8,8,0,1,1,0,16Z" transform="translate(0 -16.01)"/><path d="M504,112a8,8,0,0,1-8-8V64a8,8,0,1,1,16,0v40A8,8,0,0,1,504,112Z" transform="translate(0 -16.01)"/><path d="M504,112H8A8,8,0,0,1,8,96H504a8,8,0,0,1,0,16Z" transform="translate(0 -16.01)"/><path d="M8,112a8,8,0,0,1-8-8V64a8,8,0,1,1,16,0v40A8,8,0,0,1,8,112Z" transform="translate(0 -16.01)"/><path d="M40,208.08a8,8,0,0,1-7.59-5.47l-32-96.07a8,8,0,1,1,15.2-5.06l32,96.06a8,8,0,0,1-5.06,10.13A8.43,8.43,0,0,1,40,208.08Z" transform="translate(0 -16.01)"/><path d="M472,208.08a8.31,8.31,0,0,1-2.53-.41,8,8,0,0,1-5.06-10.13l32-96.06a8,8,0,1,1,15.19,5.06l-32,96.07A8,8,0,0,1,472,208.08Z" transform="translate(0 -16.01)"/><path d="M8,296.14a8.18,8.18,0,0,1-2.73-.48A8,8,0,0,1,.48,285.41l32-88.06a8,8,0,1,1,15,5.46l-32,88.06A8,8,0,0,1,8,296.14Z" transform="translate(0 -16.01)"/><path d="M504,296.14a8,8,0,0,1-7.51-5.26l-32-88.06a8,8,0,1,1,15-5.47l32,88.06a8,8,0,0,1-4.78,10.25A8.24,8.24,0,0,1,504,296.14Z" transform="translate(0 -16.01)"/><path d="M240.55,208.08H40a8,8,0,0,1,0-16H240.55a8,8,0,0,1,0,16Z" transform="translate(0 -16.01)"/><path d="M48.53,296.07a7.89,7.89,0,0,1-4-1.08,8,8,0,0,1-2.91-10.93,72,72,0,0,1,124.69,0,8,8,0,1,1-13.84,8,56,56,0,0,0-97,0A8,8,0,0,1,48.53,296.07Z" transform="translate(0 -16.01)"/><path d="M104,264.08a8,8,0,0,1-5.66-13.67l24-24a8,8,0,0,1,11.32,11.32l-24,24A8,8,0,0,1,104,264.08Z" transform="translate(0 -16.01)"/><path d="M128,240.11a7.93,7.93,0,0,1-5.66-2.35l-5.65-5.66H91.28l-5.65,5.66a8,8,0,0,1-11.32-11.29l8-8A8,8,0,0,1,88,216.1h32a7.93,7.93,0,0,1,5.66,2.36l8,8A8,8,0,0,1,128,240.11Z" transform="translate(0 -16.01)"/><path d="M104,264.08a8,8,0,0,1-5.66-2.34l-24-24a8,8,0,0,1,11.32-11.32l24,24a8,8,0,0,1,0,11.32A7.93,7.93,0,0,1,104,264.08Z" transform="translate(0 -16.01)"/><path d="M224,360.06a8,8,0,0,1-8-8V288.14a8,8,0,0,1,16,0v63.92A8,8,0,0,1,224,360.06Z" transform="translate(0 -16.01)"/><path d="M288,360.06H224a8,8,0,1,1,0-16h64a8,8,0,0,1,0,16Z" transform="translate(0 -16.01)"/><path d="M288,360.06a8,8,0,0,1-8-8V288.14a8,8,0,0,1,16,0v63.92A8,8,0,0,1,288,360.06Z" transform="translate(0 -16.01)"/><path d="M256,328.1a8,8,0,0,1-8-8V288.05a8,8,0,1,1,16,0V320.1A8,8,0,0,1,256,328.1Z" transform="translate(0 -16.01)"/><path d="M224,112a8,8,0,0,1-8-8V72.06a8,8,0,0,1,16,0v32A8,8,0,0,1,224,112Z" transform="translate(0 -16.01)"/><path d="M288,80.06H224a8,8,0,0,1,0-16h64a8,8,0,0,1,0,16Z" transform="translate(0 -16.01)"/><path d="M288,112a8,8,0,0,1-8-8V72.06a8,8,0,0,1,16,0v32A8,8,0,0,1,288,112Z" transform="translate(0 -16.01)"/><path d="M448.08,296.05a24,24,0,1,1,24-24A24,24,0,0,1,448.08,296.05Zm0-32a8,8,0,1,0,8,8A8,8,0,0,0,448.08,264.08Z" transform="translate(0 -16.01)"/><path d="M456.09,328.07a24,24,0,1,1,24-24A24,24,0,0,1,456.09,328.07Zm0-32a8,8,0,1,0,8,8A8,8,0,0,0,456.09,296.09Z" transform="translate(0 -16.01)"/><path d="M456.09,360.08a24,24,0,1,1,24-24A24,24,0,0,1,456.09,360.08Zm0-32a8,8,0,1,0,8,8A8,8,0,0,0,456.09,328.11Z" transform="translate(0 -16.01)"/><path d="M456.09,392.1a24,24,0,1,1,24-24A24,24,0,0,1,456.09,392.1Zm0-32a8,8,0,1,0,8,8A8,8,0,0,0,456.09,360.13Z" transform="translate(0 -16.01)"/><path d="M456.09,424.11a24,24,0,1,1,24-24A24,24,0,0,1,456.09,424.11Zm0-32a8,8,0,1,0,8,8A8,8,0,0,0,456.09,392.14Z" transform="translate(0 -16.01)"/><path d="M456,440.05h0a8,8,0,0,1-8-8l0-15.94a8,8,0,0,1,8-8h0a8,8,0,0,1,8,8l0,15.93A8,8,0,0,1,456,440.05Z" transform="translate(0 -16.01)"/><path d="M400,296.05a8,8,0,0,1-8-8,96,96,0,0,0-192,0,8,8,0,0,1-16,0,112,112,0,0,1,224,0A8,8,0,0,1,400,296.05Z" transform="translate(0 -16.01)"/><path d="M376,296.05a8,8,0,0,1-8-8,72,72,0,0,0-144,0,8,8,0,0,1-16,0,88,88,0,0,1,176,0A8,8,0,0,1,376,296.05Z" transform="translate(0 -16.01)"/><path d="M472,208.08H351.47a8,8,0,0,1,0-16H472a8,8,0,0,1,0,16Z" transform="translate(0 -16.01)"/><path d="M296,216.06a8,8,0,0,1-8-8v-24a8,8,0,0,1,16,0v24A8,8,0,0,1,296,216.06Z" transform="translate(0 -16.01)"/><path d="M256,226.77a8,8,0,0,1-6.93-4l-12-20.78a8,8,0,1,1,13.85-8l12,20.78a8,8,0,0,1-6.92,12Z" transform="translate(0 -16.01)"/><path d="M226.72,256a7.89,7.89,0,0,1-4-1.07l-20.79-12a8,8,0,1,1,8-13.86l20.79,12a8,8,0,0,1-4,14.93Z" transform="translate(0 -16.01)"/><path d="M365.28,256.05a8,8,0,0,1-4-14.92l20.81-12a8,8,0,0,1,8,13.85l-20.81,12A8,8,0,0,1,365.28,256.05Z" transform="translate(0 -16.01)"/><path d="M336,226.77a7.89,7.89,0,0,1-4-1.07,8,8,0,0,1-2.93-10.93l12-20.79a8,8,0,1,1,13.85,8l-12,20.79A8,8,0,0,1,336,226.77Z" transform="translate(0 -16.01)"/></svg>
                <br/>
                <span class="fw-500" style="display: inline-block;margin-top:10px">سرویس ها</span>
              </a>
            </li>
            <li class="nav-item col-lg-2 col-sm-4 col-6">
              <a href="#pro3" data-toggle="tab" class="nav-link">
                <svg  width="65px" height="65px" viewBox="0 0 511.91 512"><path d="M378.81,8.1A8.52,8.52,0,0,0,367.08,16V26.59H339.3A39.52,39.52,0,0,0,321.62,4a33,33,0,0,0-48.17,22.56H230.6V16A8.52,8.52,0,0,0,218.87,8.1,212.49,212.49,0,0,0,106.28,114.4a213.25,213.25,0,1,0,300,275.36A213.06,213.06,0,0,0,378.81,8.1ZM272,43.65a59.44,59.44,0,0,0,1.56,10.61,8.53,8.53,0,0,0,16.55-4.12,47.3,47.3,0,0,1-1-6.49h9.77a8.53,8.53,0,1,0,0-17.06h-7.42a16.52,16.52,0,0,1,10-8.93,17.13,17.13,0,0,1,12.15,1.42A27.24,27.24,0,0,1,324.64,37.2a8.53,8.53,0,0,0,8.27,6.45H367v9.71A8.53,8.53,0,0,0,371.7,61a161.51,161.51,0,0,1,54.87,243.9c.07-2.09.17-4.17.17-6.27A212.19,212.19,0,0,0,293.51,101a8.53,8.53,0,0,0-11.73,7.91v10.57H254a39.52,39.52,0,0,0-17.68-22.56,33,33,0,0,0-48.17,22.56H161.76A164,164,0,0,1,225.92,61a8.53,8.53,0,0,0,4.68-7.62V43.65ZM298.84,419a214.21,214.21,0,0,0,24.42-1.43A161.93,161.93,0,0,1,85.85,198.8c-.07,2.31-.25,4.58-.25,6.89C85.72,323.42,181.12,418.82,298.84,419ZM342,397a193.65,193.65,0,0,1-43.18,4.9c-108.3-.13-196.06-87.89-196.18-196.19a198.94,198.94,0,0,1,1.9-27,162,162,0,0,1,20.33-15.61,179.16,179.16,0,0,0,231.3,212.39A162.74,162.74,0,0,1,342,397Zm23.88-43.77a161.93,161.93,0,0,1-213.51-216.7h34.27a58.17,58.17,0,0,0,1.55,10.6A8.53,8.53,0,1,0,204.77,143a46.06,46.06,0,0,1-1-6.49h9.77a8.53,8.53,0,1,0,0-17.06h-7.42a16.52,16.52,0,0,1,10-8.93A17.08,17.08,0,0,1,228.25,112a27.2,27.2,0,0,1,11.09,18.12,8.51,8.51,0,0,0,8.32,6.45h34.12v9.73a8.54,8.54,0,0,0,4.68,7.61,161.36,161.36,0,0,1,79.47,199.32ZM213.54,29.11v19.1a181.28,181.28,0,0,0-68.23,65.45V108.9A8.54,8.54,0,0,0,133.58,101l-.64.28A195.16,195.16,0,0,1,213.54,29.11Zm0,465.68A196.19,196.19,0,0,1,128.24,122v19.13A179.06,179.06,0,1,0,353.65,409.9a8.35,8.35,0,0,0,.9-1.22,179.19,179.19,0,0,0,25.84-45.36,8.34,8.34,0,0,0,.78-2.16,178.34,178.34,0,0,0-82.33-220V122a196.19,196.19,0,0,1-85.3,372.81ZM417.13,362.11a212.91,212.91,0,0,0,6.72-28.39A178.82,178.82,0,0,0,384.14,48.21V29.06a196,196,0,0,1,33,333Z" transform="translate(-0.21 0)"/></svg>
                <br/>
                <span class="fw-500" style="display: inline-block;margin-top:10px">دستبند ها </span>
              </a>
            </li>
            <li class="nav-item col-lg-2 col-sm-4 col-6">
              <a href="#pro4" data-toggle="tab" class="nav-link">
                <svg width="65px" height="65px"  viewBox="0 0 512 495.33"><path d="M512,273.27a50.93,50.93,0,0,0-27.93-45.44,51.06,51.06,0,0,0-34.87-82.27,51.1,51.1,0,0,0-75-60.89L352.93,61.22a33.38,33.38,0,0,0,.64-35.62l2.33-2.34a8.53,8.53,0,0,0-12.06-12.07l-2.34,2.34a33.75,33.75,0,0,0-17.23-4.8,34.13,34.13,0,0,0-34.13,34.13,8.53,8.53,0,1,0,17.06,0A17.06,17.06,0,1,1,336,55.15l-.07.05a17,17,0,0,1-11.66,4.73,8.53,8.53,0,1,0,0,17.06,33.76,33.76,0,0,0,16.08-4.2l21,23.16a51.15,51.15,0,0,0,34.27,83.14,50.86,50.86,0,0,0,24.86,62.81,50.68,50.68,0,0,0,0,62.72,51,51,0,0,0-27.93,45.44A51.2,51.2,0,0,0,342,393.58a50.87,50.87,0,0,0-51.27,21.33,50.94,50.94,0,0,0-69.41,0A50.87,50.87,0,0,0,170,393.58a51.2,51.2,0,0,0-50.56-43.52,51,51,0,0,0-27.94-45.43,50.67,50.67,0,0,0,0-62.73,50.86,50.86,0,0,0,24.87-62.81A51.15,51.15,0,0,0,150.67,96l21-23.16A33.73,33.73,0,0,0,187.74,77a34.32,34.32,0,1,0-28.67-15.73L137.83,84.67a51.09,51.09,0,0,0-75,60.85,51.06,51.06,0,0,0-34.89,82.27,50.93,50.93,0,0,0,0,90.88,51.07,51.07,0,0,0,40.34,82.59,51.09,51.09,0,0,0,60.37,50.35,51.08,51.08,0,0,0,85.23,29.93,52.55,52.55,0,0,0,5.92,7.14,51.23,51.23,0,0,0,72.41,0,52.19,52.19,0,0,0,6-7.14,51.09,51.09,0,0,0,85.19-29.92,51.1,51.1,0,0,0,60.38-50.35,51.06,51.06,0,0,0,40.32-82.56A50.9,50.9,0,0,0,512,273.27ZM171.93,36.54a17.08,17.08,0,1,1,4.16,18.73l-.08-.05A17.07,17.07,0,0,1,171.93,36.54Zm-61,57.52a34.14,34.14,0,0,1,0,68.27,36.1,36.1,0,0,1-5.29-.57A50.71,50.71,0,0,0,83,147.59a33.79,33.79,0,0,1-6.23-19.4A34.13,34.13,0,0,1,110.94,94.06ZM36.21,184.63a34.08,34.08,0,0,1,32.06-22.3,33.69,33.69,0,0,1,26.59,12.8,7.73,7.73,0,0,0,.67.73,34.05,34.05,0,0,1-18.22,53.37,49.47,49.47,0,0,0-31.18-6.83A34.08,34.08,0,0,1,36.21,184.63ZM17.07,273.26a34.06,34.06,0,0,1,28-33.58,33.19,33.19,0,0,1,25.85,5.72,34.05,34.05,0,0,1,2.42,53.76A49.86,49.86,0,0,0,42.17,306,34,34,0,0,1,17.07,273.26ZM71.4,383.85c-1.06.09-2,.35-3.13.35a34.14,34.14,0,0,1-19.74-62,33.51,33.51,0,0,1,25.82-5.73,34.06,34.06,0,0,1,28.05,33.58,27.43,27.43,0,0,1-.36,3.14A51.6,51.6,0,0,0,71.4,383.85Zm57.73,50a33.38,33.38,0,0,1-9.66,1.57,34.13,34.13,0,0,1-34.13-34.14,31.57,31.57,0,0,1,.85-7.68A34.46,34.46,0,0,1,111.86,368a32,32,0,0,1,7.61-.85,34.13,34.13,0,0,1,34,32.62A50.68,50.68,0,0,0,129.13,433.83Zm77.16,30.72a34.06,34.06,0,0,1-61.22-20.62,21.23,21.23,0,0,1,.22-3,33.9,33.9,0,0,1,20.11-28.24,33.17,33.17,0,0,1,13.8-2.91,34.13,34.13,0,0,1,31,19.9,50.92,50.92,0,0,0-5.37,22.76A51.77,51.77,0,0,0,206.29,464.55ZM256,486.6a34.14,34.14,0,1,1,34.14-34.14A34.14,34.14,0,0,1,256,486.6ZM406.35,161.75a32.31,32.31,0,0,1-5.28.58,34.27,34.27,0,1,1,28-14.78A50.84,50.84,0,0,0,406.35,161.75Zm3.25,34.71a34.23,34.23,0,0,1,6.83-20.57,9.45,9.45,0,0,0,.67-.75,33.9,33.9,0,0,1,18.63-11.9,5,5,0,0,0,.56-.1,33.34,33.34,0,0,1,7.45-.81,34.09,34.09,0,0,1,22.13,60,49.76,49.76,0,0,0-31.16,6.82A34,34,0,0,1,409.6,196.46Zm-76.8,281.6a33.84,33.84,0,0,1-27.09-13.51,50.55,50.55,0,0,0-3.87-34.86,34.1,34.1,0,0,1,31-19.89,33.24,33.24,0,0,1,13.86,2.93,34.14,34.14,0,0,1,20.11,28.73,18.52,18.52,0,0,1,.17,2.47A34.14,34.14,0,0,1,332.8,478.06Zm59.74-42.66a33.8,33.8,0,0,1-9.68-1.57,50.85,50.85,0,0,0-24.3-34.08,34.12,34.12,0,0,1,34-32.62,32.07,32.07,0,0,1,7.68.85,34.46,34.46,0,0,1,25.6,25.67,32,32,0,0,1,.85,7.61A34.14,34.14,0,0,1,392.54,435.4Zm83.73-75a34.14,34.14,0,0,1-32.53,23.79c-1.06-.07-2.1-.19-3.14-.36A51.64,51.64,0,0,0,410,353.19c-.09-1.05-.35-2-.35-3.13a34.07,34.07,0,0,1,28-33.58,33.22,33.22,0,0,1,25.86,5.72A34.15,34.15,0,0,1,476.27,360.41Zm-6.43-54.33v0a49.34,49.34,0,0,0-31.18-6.83,34.06,34.06,0,0,1,2.41-53.76,33.42,33.42,0,0,1,25.82-5.73,34,34,0,0,1,2.95,66.36Z" transform="translate(0 -8.33)"/></svg>
                <br/>
                <span class="fw-500" style="display: inline-block;margin-top:10px">گردنبند ها </span>
              </a>
            </li>
            <li class="nav-item col-lg-2 col-sm-4 col-6">
              <a href="#pro5" data-toggle="tab" class="nav-link">
                <svg  width="65px" height="65px" viewBox="0 0 458.02 512"><path d="M145.72,270.67a42,42,0,0,0,7.76-71.53,34,34,0,0,0-15.39-55.07V137.4a6.15,6.15,0,0,1,4.11-5.73A40.12,40.12,0,1,0,88,94.11a10,10,0,0,0,20,0,20.12,20.12,0,0,1,21.56-20.06,20.12,20.12,0,0,1,5.62,38.9,26.31,26.31,0,0,0-17.07,24.45v6.67a34,34,0,0,0-15.39,55.07,42,42,0,0,0,7.76,71.53L49,348A101.1,101.1,0,0,0,156.62,507.9,10,10,0,0,0,151,488.71,81.1,81.1,0,0,1,64.62,360.44l63.47-79.81,63.46,79.81a81.23,81.23,0,0,1,14.33,73.37,10,10,0,0,0,19.19,5.63A101.24,101.24,0,0,0,207.21,348Zm-31.63-94.11a14,14,0,1,1,14,14A14,14,0,0,1,114.09,176.56Zm14,34a22,22,0,1,1-22,22A22,22,0,0,1,128.09,210.56Z" transform="translate(-26.99 0)"/><path d="M172.77,375.38,135.92,329a10,10,0,0,0-15.66,0L83.41,375.38a57.08,57.08,0,1,0,89.36,0Zm-18.46,61.75a37.08,37.08,0,0,1-55.25-49.3l29-36.51,29,36.51A37.07,37.07,0,0,1,154.31,437.13Z" transform="translate(-26.99 0)"/><path d="M463,294l-61.49-77.32a42,42,0,0,0,7.76-71.53,34,34,0,0,0-15.39-55.07V83.4A6.16,6.16,0,0,1,398,77.67,40.12,40.12,0,0,0,386.74.1a39.73,39.73,0,0,0-30.19,10.69A40.25,40.25,0,0,0,343.8,40.11a10,10,0,1,0,20,0A20.11,20.11,0,1,1,391,59,26.31,26.31,0,0,0,373.91,83.4v6.67a34,34,0,0,0-15.39,55.07,42,42,0,0,0,7.76,71.53L304.79,294A101.09,101.09,0,1,0,463,294ZM369.91,122.56a14,14,0,1,1,14,14A14,14,0,0,1,369.91,122.56Zm14,34a22,22,0,1,1-22,22A22,22,0,0,1,383.91,156.56Zm57.34,257.68a81.08,81.08,0,0,1-120.8-107.8l63.46-79.81,63.47,79.81A81,81,0,0,1,441.25,414.24Z" transform="translate(-26.99 0)"/><path d="M391.74,275a10,10,0,0,0-15.66,0l-36.85,46.35a57.09,57.09,0,1,0,89.36,0Zm18.39,108.1a37.08,37.08,0,0,1-55.25-49.3l29-36.51,29,36.51a37.06,37.06,0,0,1-2.81,49.3Z" transform="translate(-26.99 0)"/><path d="M192.49,465.31a10,10,0,1,0,7.08,2.93A10.09,10.09,0,0,0,192.49,465.31Z" transform="translate(-26.99 0)"/></svg>
                <br/>
                <span class="fw-500" style="display: inline-block;margin-top:10px" >گوشواره</span>
              </a>
            </li>
            <li class="nav-item col-lg-2 col-sm-4 col-6">
              <a href="#pro6" data-toggle="tab" class="nav-link">
                <svg width="65px" height="65px" viewBox="0 0 443.71 512"><path d="M284.86,446.63a74.31,74.31,0,0,1,12.07-31.91,6.78,6.78,0,0,0,.41-.86c138-81,146.29-258,146.36-260a8.51,8.51,0,0,0-6.29-8.54,162.83,162.83,0,0,1-45.51-20.49,25.55,25.55,0,0,0-34.83-29,212.22,212.22,0,0,1-26.4-34.52l-.45-.67a183.45,183.45,0,0,1-14.83-28.92C312.17,10,265.47,0,221.86,0s-90.31,10-93.55,31.74a184.24,184.24,0,0,1-14.82,28.92c-.16.22-.31.44-.45.67A212.71,212.71,0,0,1,86.63,95.85a25.52,25.52,0,0,0-34.83,29A162.83,162.83,0,0,1,6.29,145.34,8.51,8.51,0,0,0,0,153.88c.07,2,8.32,179,146.36,260a6.78,6.78,0,0,0,.41.86,75.3,75.3,0,0,1,12,31.92c-54.39,5.07-82,15.56-82,31.23,0,32.46,120.86,34.11,145.09,34.11s145.07-1.65,145.07-34.13c0-15.68-27.64-26.17-82.05-31.24Zm82.05-335.7a8.54,8.54,0,1,1-8.54,8.54,8.54,8.54,0,0,1,8.54-8.54h0Zm-17.05,38.4a12.8,12.8,0,1,1-12.8-12.8h0A12.8,12.8,0,0,1,349.86,149.33Zm-128-132.26c49.47,0,75.05,12.23,76.77,17.06C296.91,39,271.33,51.2,221.86,51.2c-49.92,0-75.51-12.46-76.82-16.94C146.35,29.53,171.94,17.07,221.86,17.07ZM127.29,70.73l.35-.52h0q5.87-9.42,10.79-19.36a64.7,64.7,0,0,0,15.26,7.64,8.29,8.29,0,0,0,1.87.65,218.15,218.15,0,0,0,66.3,9.12,218.14,218.14,0,0,0,66.3-9.11A7.89,7.89,0,0,0,290,58.5a63.77,63.77,0,0,0,15.29-7.64q4.92,9.93,10.79,19.35h0l.35.52a229.5,229.5,0,0,0,28.07,36.64,25.36,25.36,0,0,0-3.17,12.1v.43a28.22,28.22,0,0,0-4.31-.43,29.79,29.79,0,0,0-29.56,26.9,33.52,33.52,0,0,0-42.37,26.84,37.53,37.53,0,0,0-43.27,12,37.56,37.56,0,0,0-43.27-12,33.55,33.55,0,0,0-38.5-27.71,36.48,36.48,0,0,0-3.86.87,28.94,28.94,0,0,0-30.88-26.84,30,30,0,0,0-3,.37v-.43a25.34,25.34,0,0,0-3.18-12.1A229,229,0,0,0,127.29,70.73ZM315.73,179.2a17.07,17.07,0,1,1-17.07-17.07,17.07,17.07,0,0,1,17.07,17.07Zm-42.67,29.87a21.34,21.34,0,1,1-21.34-21.34h0a21.33,21.33,0,0,1,21.33,21.33Zm-59.73,0A21.34,21.34,0,1,1,192,187.73h0a21.33,21.33,0,0,1,21.34,21.32Zm-51.2-29.87a17.07,17.07,0,1,1-17.07-17.07,17.07,17.07,0,0,1,17.07,17.07Zm-55.47-42.67a12.8,12.8,0,1,1-12.8,12.8,12.8,12.8,0,0,1,12.8-12.8Zm-29.87-25.6a8.54,8.54,0,1,1-8.53,8.55h0A8.55,8.55,0,0,1,76.79,110.93ZM17.54,159.85a180,180,0,0,0,43.32-20.49,25.39,25.39,0,0,0,15.92,5.71h.44a29.09,29.09,0,0,0,29.44,34.13,28.24,28.24,0,0,0,4.31-.44v.44a34.17,34.17,0,0,0,34.13,34.13,33.73,33.73,0,0,0,8.76-1.33,38.1,38.1,0,0,0,68,20.87,38.09,38.09,0,0,0,68-20.87,33.69,33.69,0,0,0,43-32.83v-.44a28.24,28.24,0,0,0,4.31.44,29.14,29.14,0,0,0,29.75-28.54,28.76,28.76,0,0,0-.43-5.63h.43a25.34,25.34,0,0,0,15.94-5.64,179.75,179.75,0,0,0,43.34,20.49C423,195.43,399.53,365.13,244.75,419.46a69.61,69.61,0,0,1-45.73,0C44.43,365.21,20.86,195.44,17.54,159.85ZM221.86,494.93c-74.28,0-117-10.47-126.64-17,5.39-3.54,23.08-10.21,63.84-14.16a71.6,71.6,0,0,1-2.2,11.79,8.53,8.53,0,1,0,16.43,4.61h0a89.11,89.11,0,0,0-1.7-53.44c7,3.16,14.22,6.18,21.83,8.85a87,87,0,0,0,57,0c7.6-2.67,14.79-5.68,21.81-8.84a89.11,89.11,0,0,0-1.7,53.44A8.53,8.53,0,1,0,287,475.57a72,72,0,0,1-2.26-11.81c40.76,3.95,58.46,10.62,63.85,14.16C338.86,484.46,296.14,494.93,221.86,494.93Z" transform="translate(0.01)"/></svg>
                <br/>
                <span class="fw-500" style="display: inline-block;margin-top:10px"> رولباسی</span>
              </a>
            </li>
          </ul>
          <div class="tab-content mt-0">
            <div id="pro1" class="tab-pane fade show active">
              <div class="row">
                &lt;!&ndash; Product Start &ndash;&gt;
                <div class="col-lg-4" v-for="(item,index) in cheap_products['angoshtar']" :key="index">
                  <product :product="item" v-model="model"/>
                </div>
                &lt;!&ndash; Product End &ndash;&gt;

              </div>
            </div>
            <div id="pro2" class="tab-pane fade">
              <div class="row">
                &lt;!&ndash; Product Start &ndash;&gt;
                <div class="col-lg-4" v-for="(item,index) in cheap_products['service']" :key="index">
                  <product :product="item" v-model="model"/>
                </div>
              </div>
            </div>
            <div id="pro3" class="tab-pane fade">
              <div class="row">
                <div class="col-lg-4" v-for="(item,index) in cheap_products['dastband']" :key="index">
                  <product :product="item" v-model="model"/>
                </div>
              </div>
            </div>
            <div id="pro4" class="tab-pane fade">
              <div class="row">
                <div class="col-lg-4" v-for="(item,index) in cheap_products['gardanband']" :key="index">
                  <product :product="item" v-model="model"/>
                </div>
              </div>
            </div>
            <div id="pro5" class="tab-pane fade">
              <div class="row">
                <div class="col-lg-4" v-for="(item,index) in cheap_products['goshvare']" :key="index">
                  <product :product="item" v-model="model"/>
                </div>
              </div>
            </div>
            <div id="pro6" class="tab-pane fade">
              <div class="row">
                <div class="col-lg-4" v-for="(item,index) in cheap_products['ro_lebasi']" :key="index">
                  <product :product="item" v-model="model"/>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>-->
<!--     Feartures Products End-->


<!--    bottom banner   -->
<!--    <div class="section pt-0">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 ">
            <a :href="getBannerLink('2')">
              <img alt="محصولات جدید هنزاگلد" :src="banner['2']" style="border-radius: 3px;" />
            </a>
          </div>
        </div>
        <div class="acr-single-product">
        </div>
      </div>
    </div>-->

    <div class="products container mb-4">
      <div class="grid grid-cols-1 gap-4 lg:grid-cols-2">
<!--        :to="{name:'shop',query:{offer_day:true}}"-->
        <a :href="getBannerLink('2')">
          <img :src="newProductBanner" style="border-radius: 4px" alt="محصولات جدید هنزاگلد" />
        </a>
        <a href="/shop?ready=true">
          <img :src="sendProductBanner" style="border-radius: 4px"/>
        </a>
      </div>
    </div>



<!--    bottom banner   -->

<!--    new posts   -->
    <div class="section section-padding  pt-0">
      <div class="container">
        <div class="section-title-wrap section-header flex justify-center md:justify-between flex-wrap w-full">
          <a href="/blog" class="d-inline-block" title="جدیدترین نوشته های هنزاگلد"><h2 class="title">جدیدترین نوشته های هنزاگلد</h2></a>
          <a href="/blog" class="d-inline-block float-left mx-2" title="مقالات بیشتر"><h5 class="title ">مقالات بیشتر</h5></a>
        </div>
        <div class="row">
          <div class="col-lg-4" v-for="(item,index) in new_blog" :key="index">
            <article class="post">
              <div class="post-thumbnail">
                <a :href="`/blog/${new_blog[index].post_name}`" target="_blank"><img style="width:100%;height:250px;object-fit:cover" :src="new_blog[index].image?new_blog[index].image:'/img/no-image.png'" :alt="new_blog[index].title"></a>
              </div>
              <div class="post-body">
                <a :href="`/blog/${new_blog[index].post_name}`" target="_blank">
                  <h5 class="post-title truncate w-full">
                    {{ new_blog[index].title/*.length<40) ? new_blog[index].title : `${new_blog[index].title.slice(0,40)} ...`*/ }}
                  </h5>
                </a>
              </div>
            </article>
          </div></div>
      </div>
    </div>
<!--    new posts   -->

<!--    licensees    -->
    <div class="products container mb-4">
      <div class="section-title-wrap section-header flex-header">
            <div class="section-title-text">
              <h2 class="title">مجوز ها</h2>
            </div>
            <div class="acr-arrows primary-arrows">


              <i class="slider-prev slick-arrow">
                <svg style="width: 40px; height: 40px" viewBox="0 0 24 24">
                  <path
                    fill="currentColor"
                    d="M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,5.5L16,11H4Z"
                  />
                </svg>
              </i>
              <i class="slider-next slick-arrow">
                <svg style="width: 40px; height: 40px" viewBox="0 0 24 24">
                  <path
                    fill="currentColor"
                    d="M20,11V13H8L13.5,18.5L12.08,19.92L4.16,12L12.08,4.08L13.5,5.5L8,11H20Z"
                  />
                </svg>
              </i>
            </div>
          </div>
      <slick>
        <img class="p-[20px] shadow-[0_2px_9px_0px_rgb(34,12,43,.1)] rounded-[4px] cursor-pointer"
             data-not-lazy :src="index" @click="license = item;licenseModel =true"
             v-for="(item,index) in $store.state.licensees" :key="index"/>
      </slick>
      <fModal v-model="licenseModel" :max-width="'500px'">
        <template #body>
          <div v-html="license" class="overflow-auto h-full custom-scroll"/>
        </template>
      </fModal>
    </div>

    <Popup v-model="showPopup" />

<!--    licensees    -->

    <fModal v-model="model" :max-width="'500px'">
      <template v-slot:header>
        عدم دسترسی
      </template>
      <template v-slot:body>
        <p style="text-align: center;margin: 30px 0;">برای افزودن محصول به علاقمندی ها باید ابتدا به حساب کاربری خود وارد شوید</p>
        <div class="flex" style="justify-content: space-evenly;">
          <a class="btn-custom primary" style="z-index: 0;margin-left: 14px" :href="`/customer/login?outerRoute=${$route.path}`">ورود به حساب کاربری</a>
          <button class="btn-custom rejectBtn" style="z-index: 0" @click="model = false">انصراف</button>
        </div>
      </template>
    </fModal>
    <page-footer>
      <div class="footer-bottom">
        <div class="container">
          <div class="row">
            <div class="col-lg-12 text-center">
              <h1 class="henza">فروشگاه آنلاین طلا</h1><p style="text-align: center;display: inline" class="m-0"> - 2021 &copy; Copyright   -  تمامی حقوق برای  هنزا گلد محفوظ می باشد</p>
            </div>
            <div style="color:#979797;width:100%;text-align: center;font-size: 9px">همتا نوآوران زرگر ایرانیان</div>
            </div>
        </div>
      </div>
    </page-footer>
  </div>
</template>

<script>
import Logo from "../components/Logo";
import PageFooter from "../components/PageFooter";
import MobileMenu from "../components/MobileMenu";
import Product from "../components/Product";
import FeaturedProduct from "../components/FeaturedProduct";
import Cart from "../components/Cart";
import RangeSlider from "../components/RangeSlider";
//import BrandBar from "../components/BrandBar";
import Modal from "../components/Modal";
import FModal from "../components/fModal";
import navBar from "@/components/navBar";
import axios from "~/plugins/axios"
import Slick from "@/components/Slick.vue";
import RandomText from "@/components/RandomText";
import SuggestionProducts from "@/components/SuggestionProducts";
import Popup from "@/components/Popup";

export default {
  async asyncData({store, params, error}) {
    try {
      // let top_products = await axios.post('/get/products', {products_id: store.state.topProductsId})
      let res = await axios.get(`/front`);
      // console.log("dfdsfsdf",res)
      let categories ={}
      res['category'].map(x=>{
        categories[x.id]=x
      })
      return {
        categories,
        new_blog:res['new_blog'],
        top_products: res['top_products'],
        random: res['random'],
        offer:res['offer']
        // new_products:res['new_products'],
        // top_products,
        // cheap_products:res['cheap_products'],
        // featured_products:res['featured_products'],

      };
    } catch (e) {
      console.log(`%c ${e}`,'color:blue;border:1px solid dodgerblue')
      error({statusCode: 404, message: 'Post not found'});
    }
  },
  components: {
    Popup,
   SuggestionProducts,
    RandomText,
    Slick,
    FModal,
    navBar,
    Modal,
    //BrandBar,
    Cart,
    FeaturedProduct,
    Product,
    MobileMenu,
    Logo,
    PageFooter,
    RangeSlider
  },
  methods:{
    async addCounter(){
      try {
        await axios.get('/counter')
      } catch (e) {
        console.log(`%c ${e}`,'color:blue;')
      }
    },
    toggleMobile(){
      const asside = document.querySelector(".main-aside");
      const body = document.querySelector("body");
      asside.classList.toggle('open')
      body.classList.toggle('aside-open')
    },
    getBannerLink(id){
      if(this.$store.state.banner_ids[id]) {
        if (this.$store.state.banner_ids[id].length > 1)
          return `/shop/tag/id?${this.$store.state.banner_ids[id].map(x => 'tags=' + x + '&').join('').slice(0, -1)}`
        else if (this.$store.state.banner_ids[id].length == 1)
          return `/shop/tag/${this.$store.state.banner_ids[id][0]}`
      }
      return '/shop'
    },

  },
  data(){
    return {
      model: false,
      showPopup:false,
      //randomText: '',
      //randomTextIndex: 0,
      licenseModel: false,
      license: undefined,
    }
  },
  // layout: 'FullPage',
  async mounted() {
    // random text
   // this.randomText = this.$store.state.header_texts[0]
   // this.setRandomText()
    // random text

    await this.$store.commit('setWidth',0)
    const resizeObserver = new ResizeObserver(async entries => {
      for (let entry of entries) {
        await this.$store.commit('setWidth',entry.contentRect.width)
      }
    });
    resizeObserver.observe(document.querySelector('body'));
    //this.showPopup=true
   /*  -------------------------------------------------------------------------------
     Filters Scroll
     -------------------------------------------------------------------------------
     $('.product-main-wrapper').niceScroll({
       cursorcolor: "#dcdcdc",
       cursorwidth: "5px"
     });

     -------------------------------------------------------------------------------
     Banner Slider (Home v1)
     -------------------------------------------------------------------------------
     $(".banner-slider").slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       rtl:true,
       arrows: true,
       dots: false,
       fade: true,
       prevArrow: $('.banner .slider-prev'),
       nextArrow: $('.banner .slider-next'),
     });

     -------------------------------------------------------------------------------
     Banner Slider (Home v1)
     -------------------------------------------------------------------------------
     $(".product-banner-slider").slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       rtl:true,
       arrows: true,
       dots: false,
       prevArrow: $('.product-banner-inner .slider-prev'),
       nextArrow: $('.product-banner-inner .slider-next'),
     });

     -------------------------------------------------------------------------------
     Banner featured slider (Home v2)
     -------------------------------------------------------------------------------
     $(".banner-featured-slider").slick({
       slidesToShow: 2,
       slidesToScroll: 2,
       rtl:true,
       arrows: false,
       dots: false,
       autoplay: true,
       responsive: [{
         breakpoint: 768,
         settings: {
           slidesToShow: 1,
           slidesToScroll: 1
         }
       }]
     });

     -------------------------------------------------------------------------------
       Banner (Style 2)
       -------------------------------------------------------------------------------
     $("#myInput").click(function() {
       $(".filter-option").addClass('show-search');
     });
     $(document).on("click", function(event) {
       var $trigger = $(".input-group");
       if ($trigger !== event.target && !$trigger.has(event.target).length) {
         $(".show-search").removeClass("show-search");
       }
     });

    // Search Category
     $(".cat-selc").on("click", ".init", function() {
       $(this).closest(".cat-selc").children('.cat-selc li:not(.init)').toggleClass("animatedcat");
       $(this).closest(".cat-selc").children('.cat-selc li.init').toggleClass("arrowh3");
     });
     var allOptions = $(".cat-selc").children('li:not(.init)');
     $(".cat-selc").on("click", "li:not(.init)", function() {
       allOptions.removeClass('selected');
       $(this).addClass('selected');
       $(".cat-selc").children('.init').html($(this).html());
       allOptions.toggleClass("animatedcat");
       $(this).closest(".cat-selc").children('.cat-selc li.init').removeClass("arrowh3");
     });
     $(document).on("click", function(event) {
       var $trigger = $(".cat-selc");
       if ($trigger !== event.target && !$trigger.has(event.target).length) {
         $(".animatedcat").removeClass("animatedcat");
         $(".cat-selc li.init").removeClass("arrowh3");
       }
     });

   // Desktop Nav
     $("#open-nav").click(function() {
       $("#mySidenav").css("width", "500px");
     });
     $("#close-nav").click(function() {
       $("#mySidenav").css("width", "0%");
     });
    // Mobile Nav
       $("#mobile-mySidenav").css("width", "100%");
      $("#mobile-open-nav").click(function() {
      });
      $("#mobile-close-nav").click(function() {
        $("#mobile-mySidenav").css("width", "0%");
      });
      $('.dropdown-menu li>a').append('<span></span>');
      $('.megamenu .menu-style>ul>li a').append('<span></span>');

      $('.nav-tabs-menu>li').mouseover(function() {
        $(this).find('a').click();
      });
      $('.nav-tabs-menu>li').mouseout(function() {
        $(this).find('a').click();
      });

    // side nav
     $(document).ready(function() {
       $('.mobile-nav .sidenav li.custom-dropdown-nav>a').on('click', function() {
         $(this).removeAttr('href');
         var element = $(this).parent('li');
         if (element.hasClass('open')) {
           element.removeClass('open');
           element.find('li').removeClass('open');
           element.find('ul').slideUp();
         } else {
           element.addClass('open');
           element.children('ul').slideDown();
           element.siblings('li').children('ul').slideUp();
           element.siblings('li').removeClass('open');
           element.siblings('li').find('li').removeClass('open');
           element.siblings('li').find('ul').slideUp();
         }
       });
       $('.mobile-nav .sidenav li.custom-dropdown-nav>a').append('<span class="arrow"></span>');
     });

 // Search bar
     $("#search-btn").click(function() {
       $("#main-sec").hide();
       $("#show-search").show();
     });
     $("#close").click(function() {
       $("#show-search").hide();
       $("#main-sec").show();
     });

     -------------------------------------------------------------------------------
     About Slider
     -------------------------------------------------------------------------------

     $('.about-slider').slick({
       dots: true,
       infinite: true,
       arrows: false,
       rtl:true,
       slidesToShow: 3,
       slidesToScroll: 1,
       variableWidth: false,
       accessibility: true,
       responsive: [{
         breakpoint: 1500,
         settings: {
           slidesToShow: 2,
           slidesToScroll: 1,
           infinite: true,
           dots: true
         }
       },
         {
           breakpoint: 991,
           settings: {
             slidesToShow: 2,
             slidesToScroll: 1,
             infinite: true,
             dots: true
           }
         },
         {
           breakpoint: 568,
           settings: {
             slidesToShow: 1,
             slidesToScroll: 1,
             infinite: true,
             dots: true
           }
         }
       ]
     });

     -------------------------------------------------------------------------------
     Deals Slider
     -------------------------------------------------------------------------------
     $(".deals-slider").slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       rtl:true,
       arrows: false,
       autoplay: true,
       dots: true,
       responsive: [{
         breakpoint: 991,
         settings: {
           slidesToShow: 2,
         }
       },
         {
           breakpoint: 768,
           settings: {
             slidesToShow: 1,
           }
         }
       ]
     });
     -------------------------------------------------------------------------------
     Featured Slider
     -------------------------------------------------------------------------------
     $(".featured-slider").each(function() {

       var $this = $(this);

       $this.slick({
         slidesToShow: 1,
         slidesToScroll: 1,
         rtl:true,
         arrows: true,
         prevArrow: $this.prev('.section-title-wrap').find('.slider-prev'),
         nextArrow: $this.prev('.section-title-wrap').find('.slider-next'),
         autoplay: false,
       });

     });

     -------------------------------------------------------------------------------
     Top Jobs Slider (Home v1)
     -------------------------------------------------------------------------------
     $(".top-products-slider").slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       rtl:true,
       arrows: true,
       dots: false,
       autoplay: true,
       prevArrow: $('.top-products .slider-prev'),
       nextArrow: $('.top-products .slider-next'),
       responsive: [{
         breakpoint: 991,
         settings: {
           arrows: false,
           dots: true,
         }
       }, ]
     });

     -------------------------------------------------------------------------------
     Clients Slider
     -------------------------------------------------------------------------------

      $(".clients-slider").slick({
       slidesToShow: 5,
       slidesToScroll: 1,
       rtl:true,
       arrows: false,
       dots: false,
       autoplay: true,
       responsive: [{
         breakpoint: 991,
         settings: {
           slidesToShow: 4,
         }
       },
         {
           breakpoint: 768,
           settings: {
             slidesToShow: 3,
           }
         },
         {
           breakpoint: 575,
           settings: {
             slidesToShow: 2,
           }
         },
       ]
     });

     -------------------------------------------------------------------------------
     Agents Slider
     -------------------------------------------------------------------------------
     $(".agents-slider").slick({
       slidesToShow: 3,
       slidesToScroll: 1,
       rtl:true,
       arrows: true,
       prevArrow: $('.agents .slider-prev'),
       nextArrow: $('.agents .slider-next'),
       dots: false,
       responsive: [{
         breakpoint: 991,
         settings: {
           slidesToShow: 2,
         }
       },
         {
           breakpoint: 768,
           settings: {
             slidesToShow: 1,
           }
         }
       ]
     });

     -------------------------------------------------------------------------------
     Coming Soon & Login Sliders
     -------------------------------------------------------------------------------
     $(".acr-cs-bg-slider").slick({
       slidesToShow: 1,
       slidesToScroll: 1,
       rtl:true,
       arrows: false,
       autoplay: true,
       dots: true,
     });
     -------------------------------------------------------------------------------
     Trigger advanced Search
     -------------------------------------------------------------------------------
     $(".advanced-search-trigger").on('click', function() {
       $(".advanced-search").slideToggle(200);
       $(this).toggleClass('active');
     });

     -------------------------------------------------------------------------------
     Trigger product filter
     -------------------------------------------------------------------------------
     $(".filter-trigger").on('click', function() {
       $(".acr-filter-form").slideToggle(300);
     });

     -------------------------------------------------------------------------------
     Select2
     -------------------------------------------------------------------------------
     $('.acr-select2').select2({
       allowClear: false
     });

     -------------------------------------------------------------------------------
   Select2
   -------------------------------------------------------------------------------
     $('.acr-select2').select2({
       allowClear: false,
       minimumResultsForSearch: -1
     });
     -------------------------------------------------------------------------------
      Open/Close Category Bar
      -------------------------------------------------------------------------------
     $(".acr-category-mm").on('click', function(){
       $(this).toggleClass('open');
     })

     -------------------------------------------------------------------------------
     Tooltips
     -------------------------------------------------------------------------------
     //$('[data-toggle="tooltip"]').tooltip();

     -------------------------------------------------------------------------------
     Magnific Popup
     -------------------------------------------------------------------------------
     $('.popup-youtube').magnificPopup({
       type: 'iframe'
     });
     $('.popup-vimeo').magnificPopup({
       type: 'iframe'
     });
     $('.popup-video').magnificPopup({
       type: 'iframe'
     });
     $('.gallery-thumb').magnificPopup({
       type: 'image',
       gallery: {
         enabled: true
       },
     });
     $('.magnific-gallery').magnificPopup({
       delegate: 'a',
       type: 'image',
       removalDelay: 300,
       easing: 'ease-in-out',
       mainClass: 'mfp-fade',
       gallery: {
         enabled: true
       }

     });

     -------------------------------------------------------------------------------
       Zoom image js
       -------------------------------------------------------------------------------

     $('.product-zoom-image')
       .wrap('<span style="display:inline-block" class="product-single-zoom"></span>')
       .css('display', 'block')
       .parent()
       .zoom();

     -------------------------------------------------------------------------------
          Masonry
          -------------------------------------------------------------------------------
     $('.masonry').imagesLoaded(function() {
       var isotopeContainer = $('.masonry');
       isotopeContainer.isotope({
         itemSelector: '.masonry-item',
       });
     });



     $('.our-project-2-wrap').masonry({
       itemSelector: '.grid-item',
       columnWidth: 1,
       percentPosition: true
     });

     //--Masonary item refresh on tab click--//

     var container = $('.our-project-2');

     $('.our-project .hc-tab-wrap a.nav-link[data-toggle=tab]').each(function() {
       var $this = $(this);

       $this.on('shown.bs.tab', function() {
         container.masonry({
           columnWidth: '.project-img',
           itemSelector: '.project-img'
         });

       });
     });
     -------------------------------------------------------------------------------
       Counter
       -------------------------------------------------------------------------------
     $('.counter-number').each(function() {
       $(this).prop('Counter', 0).animate({
         Counter: $(this).text()
       }, {
         duration: 4000,
         easing: 'swing',
         step: function(now) {
           $(this).text(Math.ceil(now));
         }
       });
     });

     -------------------------------------------------------------------------------
     Submit product Gallery Upload
     -------------------------------------------------------------------------------
     if ($("#acrProductGallery").length) {
       // This prevents using the class 'dropzone' which will conflict with new instances of DropZone created programatically
       // Set this to true, or delete if you want to create an instance of Dropzone without having to write any code:
       // More info here: https://www.dropzonejs.com/#configuration
       Dropzone.autoDiscover = false;
       $("#acrProductGallery").dropzone({
         url: "https://androthemes.com/scripts/silence.php",
         paramName: "file",
         maxFiles: 5,
         maxFilesize: 5,
         addRemoveLinks: true,
         acceptedFiles: "image/!*,application/pdf,.psd",
       });
     }*/
   },
  computed:{
    bg(){
      if(this.$store.state.windowWidth <= 425){
        return this.$store.state.headerIndex.sm
      }
      else if(this.$store.state.windowWidth < 768){
        return this.$store.state.headerIndex.md
      }
      else {
        return this.$store.state.headerIndex.lg
      }
    },
    banner(){
      return this.$store.state.banner
    },
    newProductBanner(){
      return this.$store.state.new_product
    },
    sendProductBanner(){
      return this.$store.state.send_product
    },
    customCats(){
      return this.$store.state.cats
    },
    baseURL(){
      return process.env.baseUrl;
    },
    filterPrice(){
      return this.$store.state.config.filterPrice;
    },
    menu(){
      return this.$store.state.config.menu;
    },
    newestBlogs() {
      //console.log(this.$store.state.config);
      //return this.$store.state.config.newestBlogs;
    },
    newestProducts() {
      // console.log(this.$store.state.config);
      //return this.$store.state.config.newest;
    },
   /* brands(){
       //console.log('this is brand ',this.$store.state.config.brands);
      return this.$store.state.config.brands;
    },*/
    /*topProducts(){

      if(this.new_products)
      {
        console.log(this.new_products);
        return this.new_products;
      }
      return [];

    }*/
  },

  //seo
  head() {
    return {
      //title: 45773865,
      title: this.$store.state.seo.home.title,
      meta: this.$store.state.seo.home.meta,
      script: [{ type: 'application/ld+json', json: this.$store.state.seo.home.jsonld }]
    }
  },
}
</script>

<style>
@media (max-width: 425px) {
  .acr-category-thumb{
    width: 100%;
  }
  img.cat{
    width: 100% !important;
    object-fit: cover;
  }
}
.box-icon{
  width: 60px;
  height: 60px;
  display: inline;
  margin-top: 8px;
}
.box-text
{
  text-align: center;
  margin-top:1.5rem;
}
.cta-body{
  text-align: center;
}
.box h5{
  margin: unset;
  font-size: 0.75rem;
 /* margin-top: 5px;*/
  color:#fff;
}
.box{
 /* width: 200px;*/
  cursor: pointer;
 /* height: 200px;*/
 /* padding:10px;*/
  /* background-color: #fffcef;*/
/*  border-radius: 4px;*/
/* box-shadow: 0 2px 9px 0px rgb(34 12 43 / 10%);*/
/* margin-bottom: 30px;*/
  margin-bottom: 0.1rem;
 /*background-image: linear-gradient(to bottom, rgba(175,162,96, 0.1), rgba(36, 109, 248, 0));*/
  /*background-image: url("/img/customer-service.svg");*/
 /*display: flex;*/
}

/*
.servie:hover{
  fill: #1c7430 !important;
}
*/


/*.cta-body img
{
-webkit-animation: heartbeat 1.5s ease-in-out infinite both;
animation: heartbeat 1.5s ease-in-out infinite both;
}*/

/*.cta-body:hover>img
{
!*background-color: #00a2e8;*!
  -webkit-animation: wobble-hor-bottom 0.8s both;
  animation: wobble-hor-bottom 0.8s both;
}*/

/*@-webkit-keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}
@keyframes heartbeat {
from {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-transform-origin: center center;
transform-origin: center center;
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
10% {
-webkit-transform: scale(0.91);
transform: scale(0.91);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
17% {
-webkit-transform: scale(0.98);
transform: scale(0.98);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
33% {
-webkit-transform: scale(0.87);
transform: scale(0.87);
-webkit-animation-timing-function: ease-in;
animation-timing-function: ease-in;
}
45% {
-webkit-transform: scale(1);
transform: scale(1);
-webkit-animation-timing-function: ease-out;
animation-timing-function: ease-out;
}
}*/
/*@-webkit-keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}@keyframes wobble-hor-bottom{0%,100%{-webkit-transform:translateX(0);transform:translateX(0);-webkit-transform-origin:50% 50%;transform-origin:50% 50%}15%{-webkit-transform:translateX(-30px) rotate(-6deg);transform:translateX(-30px) rotate(-6deg)}30%{-webkit-transform:translateX(15px) rotate(6deg);transform:translateX(15px) rotate(6deg)}45%{-webkit-transform:translateX(-15px) rotate(-3.6deg);transform:translateX(-15px) rotate(-3.6deg)}60%{-webkit-transform:translateX(9px) rotate(2.4deg);transform:translateX(9px) rotate(2.4deg)}75%{-webkit-transform:translateX(-6px) rotate(-1.2deg);transform:translateX(-6px) rotate(-1.2deg)}}*/

/*.delivery{
  background: url("/img/box/delivery.jpg") no-repeat;
  width: 120px;
  height: 120px;
  margin-right: auto;
  margin-left: auto;
}*/
/*
.test:hover .delivery{
  display: none;
 !* background-image: url("/img/box/02.gif");*!
}
*/
.img_hover
{
  display: none;
  width: 4.5rem;
  height: 4.5rem;
}
.img_main{
  width: 4.5rem;
  height: 4.5rem;
}
.hover_image:hover .img_main
{
  display: none;
}

.hover_image:hover .img_hover
{
  display: inline;
}

.acr-header .bottom-header .bottom-navigation nav>.main-navigation>.menu-item>a:hover
{
  color:#fff;
}

.category_box{
  text-align: center;
  margin-bottom: 20px;
}



/*.test:hover .delivery_gif{
  display: inline;
  !*background-image: url("/img/box/02.gif");*!
}*/
/*.delivery_gif
{
  display: none;
}*/

/*.support{
  background: url("/img/box/support.jpg") no-repeat;
  width: 120px;
  height: 120px;
  margin-right: auto;
  margin-left: auto;
}
.support:hover{
  background-image: url("/img/box/01.gif");
}

.return{
  background: url("/img/box/return.jpg") no-repeat;
  width: 120px;
  height: 120px;
  margin-right: auto;
  margin-left: auto;
}
.return:hover{
  background-image: url("/img/box/04.gif");
}

.warranty{
  background: url("/img/box/warranty.jpg") no-repeat;
  width: 120px;
  height: 120px;
  margin-right: auto;
  margin-left: auto;
}
.warranty:hover{
  background-image: url("/img/box/03.gif");
}*/
.cat{
  display: block;
  text-align: center;
  margin: auto;
  width: 100%;
  height: 233px !important;
  object-fit: cover;
}
.custom-scroll::-webkit-scrollbar-thumb {
    background:var(--primary-color);
  border-radius: 4px;
}
.custom-scroll::-webkit-scrollbar {
    width: 8px;
}
.custom-scroll::-webkit-scrollbar-track {
    background: transparent;
}
</style>