
<!DOCTYPE html>
{% for lang in site['languages'] %}
{% if lang['active'] %}
<html lang="{{ lang['code'] }}">
{% endif %}
{% endfor %}
<head>
  <base href="{{ site['url'] }}/">
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>{{ title }}</title>
  <meta name="keywords" content="{{ keywords }}">
  <meta name="description" content="{{ description }}">
  {% if site['favicon'] %}
    <link rel="shortcut icon" type="image/ico" href="{{ site['favicon'] }}" />
  {% endif %}

  <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
  
    
    {{ headerCode }}

{% if user['lang'] == "ar" %}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-v4-rtl/4.6.0-1/css/bootstrap-rtl.min.css" integrity="sha512-+1C9xBCl0azgGjU6bIsATfB4XOQ0MSFduPs388NiyzwYt4nfelS72KSPSFZT338FjP7F3mMme2re8+gUJe2HZQ==" crossorigin="anonymous" />
{% endif %}


  
    {% for style in styleList %}
      <link rel="stylesheet" type="text/css" href="{{ style }}">
    {% endfor %}

 <script src="https://browser.sentry-cdn.com/5.6.2/bundle.min.js" integrity="sha384-H4chu/XQ3ztniOYTpWo+kwec6yx3KQutpNkHiKyeY05XCZwCSap7KSwahg16pzJo" crossorigin="anonymous"></script>

<script>Sentry.init({ dsn: 'https://294a44a1147a468c88270ee2dd6ecde9@sentry.io/4504813329711104' });</script>
<style>.integration-fixed {
  position: fixed;
  z-index: 10000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  row-gap: 12px;
}
.integration-fixed__top-left {
  top: 0;
  left: 0;
}
.integration-fixed__top-right {
  top: 0;
  right: 0;
}
.integration-fixed__bottom-left {
  bottom: 0;
  left: 0;
}
.integration-fixed__bottom-right {
  bottom: 0;
  right: 0;
}
</style>




<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-TQMJ6XB3');</script>
<!-- End Google Tag Manager -->

    <!-- Lottie Animation -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.7.8/lottie.min.js"></script>

    <!-- Locomotive Scroll CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/locomotive-scroll/dist/locomotive-scroll.min.css">
    <!-- Swiper CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">
        <link rel="stylesheet" type="text/css" href="https://storage.perfectcdn.com/global/0ue9b7wa77itnzho.css">
        <link rel="stylesheet" type="text/css" href="https://storage.perfectcdn.com/fcm9r8/k9cil2em6m6w6gc9.css">
        <link rel="stylesheet" type="text/css" href="https://storage.perfectcdn.com/libs/bootstrap-datetimepicker/4.17.47/bootstrap-datetimepicker.min.css">
        <link rel="stylesheet" type="text/css" href="https://storage.perfectcdn.com/css/font-awesome/css/all.min.css">
        <link rel="stylesheet" type="text/css" href="https://storage.perfectcdn.com/global/cuw6iix855efzrw3.css">
        <link rel="stylesheet" type="text/css" href="https://storage.perfectcdn.com/global/ny6mhzbbh07u28pq.css">
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons@latest/iconfont/tabler-icons.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css" crossorigin="anonymous" />
    <link rel='stylesheet' href='https://cdn.jsdelivr.net/jquery.slick/1.5.0/slick-theme.css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/introjs.min.css">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.5.0/css/flag-icon.min.css" rel="stylesheet" type="text/css" />
    <script type="application/ld+json">
    {
      "@context": "https://schema.org/",
      "@type": "WebSite",
      "name": "SMM Birla",
      "url": "https:// {{site["site_name"] }}.com/",
      "potentialAction": {
        "@type": "SearchAction",
        "target": "{search_term_string}",
        "query-input": "required name=search_term_string"
      }
    }
    </script>
      
  </head>
  
  	<!-- start desktop mode -->
	
		{%  if settings['demo_mode'] == 1 %}
    	
       <style>
            .fixed-footer{
                position: fixed;
                background: #fff;
                border:1px solid #000;
                width:100%;
                bottom:0;
                z-index:99999;
                padding:10px;
            }
        </style>
        
    <div class="fixed-footer">
            <h4 style="color:#000">Choose Theme: 
                
                   {% for thm in site['themes'] %}
<a href="/select-theme/{{thm['dirname']}}" style="color:blue;margin:0 10px;font-size:16px">[ {{thm['name']}} ]</a>
{% endfor %}

            </h4>
    </div>
  
{% endif %}
	
	{% if user['auth'] %}

    <style>
    .container-fluid{
      margin-left: auto;
    }
    footer, .footer-top {
      margin-left: 100px;
      margin-top: 20px;
    }
    .footer-btm {
      border-top: 1px solid #fff;
      backdrop-filter: blur(10px);
      padding: 15px;
      margin-top: 20px;
    }
    body{
      background: url('https://storage.perfectcdn.com/fcm9r8/0hpnjxgrgi7h7c06.png') !important;
    }
    @media (max-width: 765px){
      footer, .footer-top {
        margin-left: auto;
        margin-top: 20px;
      }
    }
    button#topgoTo {
      left: 120px;
      box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    }
  </style>
    <body class="">
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TQMJ6XB3"
                      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->


    <button onclick="topFunction()" id="topgoTo" title="Go to top"><i class="fas fa-arrow-up"></i></button>
    <!--    -->
    
    <div id="notify-wrapper" class="alert alert-success hidden" style="display: none;"></div>

    <nav class="usernav navbar navbar-default navbar-fixed-top ">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar" style="display: none;">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="/">
                        <img src="{{ site['logo'] }}" alt="{{
                        site["site_name"] }}" title="{{
                        site["site_name"] }}">
                      </a>
          <button class="sidebarbtn" id="sidebarbtn">
            <div class="icon icon1"></div>
            <div class="icon icon2"></div>
            <div class="icon icon3"></div>
          </button>
          <div class="dropdown">
            <button class="btn btn-default dropdown-toggle profilebutn" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              <img src="https://i.imgur.com/2uL3ZvW.jpeg" alt="Profile Picture" class="img-circle profilePicture">
              <div class="onlinecircle"></div>
            </button>
            <ul class="dropdown-menu profileddmenu" aria-labelledby="dropdownMenuButton">
              <div class="profcard">
                <img class="profilePicture" src="https://i.imgur.com/2uL3ZvW.jpeg">
                <p>{{ user["username"]  }}</p>
              </div>
              <li><a href="/account">Settings</a></li>
              <li><a href="/logout">Log out</a></li>
            </ul>
          </div>
        </div>
        <!--<div id="navbar" class="collapse navbar-collapse">
      <ul class="nav navbar-nav navbar-left-block">
               <li  class="active" >
         <a href="/" >
                     <i class="navbar-icon ti ti-layout-dashboard"></i>
                    | New Order [Place Orders]
         </a>
        </li>
               <li >
         <a href="/massorder" >
                     <i class="navbar-icon far fa-box"></i>
                    | Mass Orders [Place Orders]
         </a>
        </li>
               <li >
         <a href="/pricing" >
                     <i class="navbar-icon fab fa-stack-overflow"></i>
                    | Services [Place Orders]
         </a>
        </li>
               <li >
         <a href="/addfunds" >
                     <i class="navbar-icon fas fa-money-bill-wave"></i>
                    | Add Funds [Payments]
         </a>
        </li>
               <li >
         <a href="/orders" >
                     <i class="navbar-icon fas fa-charging-station"></i>
                    | Track Orders [Order History]
         </a>
        </li>
               <li >
         <a href="#"  target="_blank" >
                     <i class="navbar-icon fab fa-whatsapp"></i>
                    | WhatsApp Us [Contact Us]
         </a>
        </li>
               <li >
         <a href="#"  target="_blank" >
                     <i class="navbar-icon fab fa-telegram-plane"></i>
                    | Telegram Us [Contact Us]
         </a>
        </li>
               <li >
         <a href="/affiliates" >
                     <i class="navbar-icon fal fa-badge-dollar"></i>
                    | Refer & Earn [Make Money]
         </a>
        </li>
               <li >
         <a href="/child-panel" >
                     <i class="navbar-icon fal fa-browser"></i>
                    | Own a Panel [Make Money]
         </a>
        </li>
               <li >
         <a href="/api-docs" >
                     <i class="navbar-icon fal fa-link"></i>
                    | Api Docs [Developer Info]
         </a>
        </li>
             </ul>
      <ul class="nav navbar-nav navbar-right navbar-right-block">
                                  <li class="dropdown dropdown-currencies">
           <a class="dropdown-toggle" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                        <span class="badge">$0</span>
                        <span class="caret"></span>
                      </a>
           <ul class="dropdown-menu" id="currencies-list">
                         <li>
              <a href="#" id="currencies-item" data-rate-key="AED" data-rate-symbol="د.إ">AED د.إ</a>
             </li>
                         <li>
              <a href="#" id="currencies-item" data-rate-key="BDT" data-rate-symbol="৳">BDT ৳</a>
             </li>
                         <li>
              <a href="#" id="currencies-item" data-rate-key="BRL" data-rate-symbol="R$">BRL R$</a>
             </li>
                         <li>
              <a href="#" id="currencies-item" data-rate-key="EUR" data-rate-symbol="€">EUR €</a>
             </li>
                         <li>
              <a href="#" id="currencies-item" data-rate-key="GBP" data-rate-symbol="£">GBP £</a>
             </li>
                         <li>
              <a href="#" id="currencies-item" data-rate-key="ILS" data-rate-symbol="₪">ILS ₪</a>
             </li>
                         <li>
              <a href="#" id="currencies-item" data-rate-key="INR" data-rate-symbol="₹">INR ₹</a>
             </li>
                         <li>
              <a href="#" id="currencies-item" data-rate-key="RUB" data-rate-symbol="₽">RUB ₽</a>
             </li>
                         <li>
              <a href="#" id="currencies-item" data-rate-key="SAR" data-rate-symbol="ر.س">SAR ر.س</a>
             </li>
                         <li>
              <a href="#" id="currencies-item" data-rate-key="TRY" data-rate-symbol="₺">TRY ₺</a>
             </li>
                       </ul>
          </li>
                                         <li >
          <a href="/account" >Account</a>
         </li>
                                <li >
          <a href="/logout" >Logout</a>
         </li>
                     </ul>
     </div>-->
      </div>
    </nav>
    <!--<div class="navbarbottom">
      <div class="profilecard">
        <img class="profilePicture" src="https://i.imgur.com/N9D1AiH.png">
        <div>
          <p class="pcuser">admin11</p>
          <p class="pcuserfnd">$0</p>
        </div>
        <i class="fad fa-arrow-right" onclick="location.href = '/account';"></i>
      </div>
      <ul>
                <li  class="active" >
          <a href="/" >
                        <i class="navbar-icon ti ti-layout-dashboard"></i>
                        <p>| New Order [Place Orders]</p>
          </a>
        </li>
                <li >
          <a href="/massorder" >
                        <i class="navbar-icon far fa-box"></i>
                        <p>| Mass Orders [Place Orders]</p>
          </a>
        </li>
                <li >
          <a href="/pricing" >
                        <i class="navbar-icon fab fa-stack-overflow"></i>
                        <p>| Services [Place Orders]</p>
          </a>
        </li>
                <li >
          <a href="/addfunds" >
                        <i class="navbar-icon fas fa-money-bill-wave"></i>
                        <p>| Add Funds [Payments]</p>
          </a>
        </li>
                <li >
          <a href="/orders" >
                        <i class="navbar-icon fas fa-charging-station"></i>
                        <p>| Track Orders [Order History]</p>
          </a>
        </li>
                <li >
          <a href="#"  target="_blank" >
                        <i class="navbar-icon fab fa-whatsapp"></i>
                        <p>| WhatsApp Us [Contact Us]</p>
          </a>
        </li>
                <li >
          <a href="#"  target="_blank" >
                        <i class="navbar-icon fab fa-telegram-plane"></i>
                        <p>| Telegram Us [Contact Us]</p>
          </a>
        </li>
                <li >
          <a href="/affiliates" >
                        <i class="navbar-icon fal fa-badge-dollar"></i>
                        <p>| Refer & Earn [Make Money]</p>
          </a>
        </li>
                <li >
          <a href="/child-panel" >
                        <i class="navbar-icon fal fa-browser"></i>
                        <p>| Own a Panel [Make Money]</p>
          </a>
        </li>
                <li >
          <a href="/api-docs" >
                        <i class="navbar-icon fal fa-link"></i>
                        <p>| Api Docs [Developer Info]</p>
          </a>
        </li>
                <li class="smbtn">
          <a><i class="navbar-icon fas fa-chevron-down"></i> <p>Show More</p></a>
          <ul class="sbsub">
            <li><a><i class="navbar-icon fas fa-sack-dollar"></i> <p>Earn Money</p></a></li>
          </ul>
        </li>
      </ul>
    </div>-->


    <!--<ul>
                <li  class="active" >
          <a href="/" >
                        <i class="navbar-icon ti ti-layout-dashboard"></i>
                        <p>| New Order [Place Orders]</p>
          </a>
        </li>
                <li >
          <a href="/massorder" >
                        <i class="navbar-icon far fa-box"></i>
                        <p>| Mass Orders [Place Orders]</p>
          </a>
        </li>
                <li >
          <a href="/pricing" >
                        <i class="navbar-icon fab fa-stack-overflow"></i>
                        <p>| Services [Place Orders]</p>
          </a>
        </li>
                <li >
          <a href="/addfunds" >
                        <i class="navbar-icon fas fa-money-bill-wave"></i>
                        <p>| Add Funds [Payments]</p>
          </a>
        </li>
                <li >
          <a href="/orders" >
                        <i class="navbar-icon fas fa-charging-station"></i>
                        <p>| Track Orders [Order History]</p>
          </a>
        </li>
                <li >
          <a href="#"  target="_blank" >
                        <i class="navbar-icon fab fa-whatsapp"></i>
                        <p>| WhatsApp Us [Contact Us]</p>
          </a>
        </li>
                <li >
          <a href="#"  target="_blank" >
                        <i class="navbar-icon fab fa-telegram-plane"></i>
                        <p>| Telegram Us [Contact Us]</p>
          </a>
        </li>
                <li >
          <a href="/affiliates" >
                        <i class="navbar-icon fal fa-badge-dollar"></i>
                        <p>| Refer & Earn [Make Money]</p>
          </a>
        </li>
                <li >
          <a href="/child-panel" >
                        <i class="navbar-icon fal fa-browser"></i>
                        <p>| Own a Panel [Make Money]</p>
          </a>
        </li>
                <li >
          <a href="/api-docs" >
                        <i class="navbar-icon fal fa-link"></i>
                        <p>| Api Docs [Developer Info]</p>
          </a>
        </li>
                <li class="smbtn">
          <a><i class="navbar-icon fas fa-chevron-down"></i> <p>Show More</p></a>
          <ul class="sbsub">
            <li>
              <a href="/affiliates">
                <i class="navbar-icon ti ti-mood-happy"></i>
                <p>| Refer &amp; Earn</p>
              </a>
            </li>
            <li>
              <a href="/child-panel">
                <i class="navbar-icon ti ti-brand-abstract"></i>
                <p>|  Own a Panel</p>
              </a>
            </li>
            <li>
              <a href="/api">
                <i class="navbar-icon ti ti-api"></i>
                <p>| API DOCS</p>
              </a>
            </li>
          </ul>
        </li>
      </ul>-->

    <!--<div class="navbarbottom">
      <div class="sidebarhead">
        <img src="https://storage.perfectcdn.com/fcm9r8/px4as35l14pyhpjw.png">
      </div>
      <div class="profilecard">
        <img class="profilePicture" src="https://i.imgur.com/pvn8H2P.png">
        <div>
          <i class="fas fa-cog" onclick="location.href = '/account';"></i>
          <p class="pcuser">admin11</p>
          <p class="pcuserfnd">$0</p>
        </div>
      </div>
      <div class="fncnbtn">
        <a class="profbutn" data-toggle="modal" data-target="#langModal">Change Language</a>
        <a class="profbutn" data-toggle="modal" data-target="#curncyModal">Change Currency</a>
      </div>

      
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
      <ul>
                <p class="menuheading">Place Orders</p>
                <li  class="active" >
          <a href="/" >
                        <i class="navbar-icon ti ti-layout-dashboard"></i>
                        <p>| New Order</p>
          </a>
        </li>
                <li >
          <a href="/massorder" >
                        <i class="navbar-icon far fa-box"></i>
                        <p>| Mass Orders</p>
          </a>
        </li>
                <li >
          <a href="/pricing" >
                        <i class="navbar-icon fab fa-stack-overflow"></i>
                        <p>| Services</p>
          </a>
        </li>
                        <p class="menuheading">Payments</p>
                <li >
          <a href="/addfunds" >
                        <i class="navbar-icon fas fa-money-bill-wave"></i>
                        <p>| Add Funds</p>
          </a>
        </li>
                        <p class="menuheading">Order History</p>
                <li >
          <a href="/orders" >
                        <i class="navbar-icon fas fa-charging-station"></i>
                        <p>| Track Orders</p>
          </a>
        </li>
                        <p class="menuheading">Contact Us</p>
                <li >
          <a href="#"  target="_blank" >
                        <i class="navbar-icon fab fa-whatsapp"></i>
                        <p>| WhatsApp Us</p>
          </a>
        </li>
                <li >
          <a href="#"  target="_blank" >
                        <i class="navbar-icon fab fa-telegram-plane"></i>
                        <p>| Telegram Us</p>
          </a>
        </li>
                        <p class="menuheading">Make Money</p>
                <li >
          <a href="/affiliates" >
                        <i class="navbar-icon fal fa-badge-dollar"></i>
                        <p>| Refer & Earn</p>
          </a>
        </li>
                <li >
          <a href="/child-panel" >
                        <i class="navbar-icon fal fa-browser"></i>
                        <p>| Own a Panel</p>
          </a>
        </li>
                        <p class="menuheading">Developer Info</p>
                <li >
          <a href="/api-docs" >
                        <i class="navbar-icon fal fa-link"></i>
                        <p>| Api Docs</p>
          </a>
        </li>
                      </ul>


      <div class="socicnsb">
        <i class="fab fa-youtube" onclick="location.href = 'https://youtube.com/@user-jy1kq9pu1t';"></i>
        <i class="fab fa-instagram" onclick="location.href = 'https://instagram.com/ {{site["site_name"] }}?igshid=YmMyMTA2M2Y=';"></i>
        <i class="fas fa-power-off" onclick="location.href = '/logout';"></i>
      </div>
    </div>-->

    <!--<div class="sidebarnorm expanded">-->
    <div class="navbarbottom">
      <div class="userprofilecardnew">
        <img class="profilePicture" src="https://i.imgur.com/pvn8H2P.png">
        <div class="userprofcont">
          <p class="upcname">{{ user["username"]  }}</p>
          <p class="upcfund">{{ user["balance"] }}</p>
        </div>
        <i class="far fa-chevron-right" onclick="location.href = '/account';"></i>
      </div>
      
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      
      <ul class="sidemenu">
                <p class="menusubs">Place Orders</p>
                <li  class="active" >
          <a href="/" >
                        <i class="navbar-icon ti ti-layout-dashboard"></i>
                        <p>| New Order</p>
            <i class="far fa-chevron-right rightarrowsbm"></i>
          </a>
        </li>
                <li >
          <a href="/massorder" >
                        <i class="navbar-icon far fa-box"></i>
                        <p>| Mass Orders</p>
            <i class="far fa-chevron-right rightarrowsbm"></i>
          </a>
        </li>
                <li >
          <a href="/services" >
                        <i class="navbar-icon fab fa-stack-overflow"></i>
                        <p>| Services</p>
            <i class="far fa-chevron-right rightarrowsbm"></i>
          </a>
        </li>
                        <p class="menusubs">Payments</p>
                <li >
          <a href="/addfunds" >
                        <i class="navbar-icon fas fa-money-bill-wave"></i>
                        <p>| Add Funds</p>
            <i class="far fa-chevron-right rightarrowsbm"></i>
          </a>
        </li>
                        <p class="menusubs">Order History</p>
                <li >
          <a href="/orders" >
                        <i class="navbar-icon fas fa-charging-station"></i>
                        <p>| Track Orders</p>
            <i class="far fa-chevron-right rightarrowsbm"></i>
          </a>
        </li>
                        <p class="menusubs">Contact Us</p>
                <li >
          <a href="#"  target="_blank" >
                        <i class="navbar-icon fab fa-whatsapp"></i>
                        <p>| WhatsApp Us</p>
            <i class="far fa-chevron-right rightarrowsbm"></i>
          </a>
        </li>
                <li >
          <a href="#"  target="_blank" >
                        <i class="navbar-icon fab fa-telegram-plane"></i>
                        <p>| Telegram Us</p>
            <i class="far fa-chevron-right rightarrowsbm"></i>
          </a>
        </li>
                        <p class="menusubs">Make Money</p>
                <li >
          <a href="/affiliates" >
                        <i class="navbar-icon fal fa-badge-dollar"></i>
                        <p>| Refer & Earn</p>
            <i class="far fa-chevron-right rightarrowsbm"></i>
          </a>
        </li>
                <li >
          <a href="/child-panels" >
                        <i class="navbar-icon fal fa-browser"></i>
                        <p>| Own a Panel</p>
            <i class="far fa-chevron-right rightarrowsbm"></i>
          </a>
        </li>
                        <p class="menusubs">Developer Info</p>
                <li >
          <a href="/api" >
                        <i class="navbar-icon fal fa-link"></i>
                        <p>| Api Docs</p>
            <i class="far fa-chevron-right rightarrowsbm"></i>
          </a>
        </li>
                      </ul>

      <div class="sidebarbtmacbtns">
        <ul class="actnsbtnssb">
          <li>
            <button onclick="window.open('https://youtube.com/@user-jy1kq9pu1t', '_blank')">
              <i class="fab fa-youtube"></i>
            </button>
          </li>
          <li>
            <button onclick="window.open('https://instagram.com/ {{site["site_name"] }}?igshid=YmMyMTA2M2Y=', '_blank')">
              <i class="fab fa-instagram"></i>
            </button>
          </li>
          <li>
            <button data-toggle="modal" data-target="#curncyModal">
              <i class="fas fa-dollar-sign"></i>
            </button>
          </li>
          <li>
            <button data-toggle="modal" data-target="#langModal">
              <i class="far fa-language"></i>
            </button>
          </li>
          <li>
            <button onclick="window.location.href='/logout'">
              <i class="fas fa-power-off"></i>
            </button>
          </li>
        </ul>
      </div>
    </div>

    <!-- Language Modal -->
    <div class="modal servmodal fade" id="langModal" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="exampleModalLabel">Select Preffered Language</h4>
          </div>
          <div class="modal-body">
            <!-- Google Translate Widget with Buttons -->
            <div id="google_translate_element"></div>
            <script type="text/javascript">
              function googleTranslateElementInit() {
                new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'af,am,ar,az,be,bg,bn,bs,ca,ceb,co,cs,cy,da,de,el,en,eo,es,et,eu,fa,fi,fr,fy,ga,gd,gl,gu,ha,haw,hi,hmn,hr,ht,hu,hy,id,ig,is,it,iw,ja,jw,ka,kk,km,kn,ko,kur,ky,la,lb,lo,lt,lv,mg,mhr,mi,mk,ml,mn,mr,ms,mt,my,ne,nl,no,ny,or,pa,pap,pl,ps,pt,ro,ru,rw,si,sk,sl,sm,sn,so,sq,sr,su,sv,sw,ta,te,tg,th,tl,tr,tt,ty,ug,uk,ur,uz,vi,xh,yi,yo,zh-CN,zh-TW,zu'}, 'google_translate_element');
              }
            </script>
            <script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>


          </div>
        </div>
      </div>
    </div>
    <!-- Currency Modal -->
        <div class="modal servmodal fade" id="curncyModal" role="dialog">
      <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
            <h4 class="modal-title" id="exampleModalLabel">Select Your Currency</h4>
          </div>
          <div class="modal-body">
            <ul class="curndropdown-menu" id="currencies-list">
                            <li>
               {{ currencies_dropdown }}</span></a>
              </li>
                          </ul>
          </div>
        </div>
      </div>
    </div>
     



<!--<script>
    function displayTime() {
      var currentTime = new Date();
      var hours = currentTime.getHours();
      var minutes = currentTime.getMinutes();
      var date = currentTime.getDate();
      var month = currentTime.getMonth() + 1;
      var year = currentTime.getFullYear();
      var day = currentTime.getDay();
      var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

      if (hours > 12) {
        hours = hours - 12;
        var ampm = "PM";
      } else {
        var ampm = "AM";
      }

      if (hours < 10) {
        hours = "0" + hours;
      }

      if (minutes < 10) {
        minutes = "0" + minutes;
      }

      document.getElementById("time").innerHTML = hours + ":" + minutes + " " + ampm;
      document.getElementById("date").innerHTML = date + "/" + month + "/" + year;
      document.getElementById("day").innerHTML = days[day];

      var greet;

      if (hours < 12) {
        greet = "Good Morning";
      } else if (hours >= 12 && hours <= 17) {
        greet = "Good Afternoon";
      } else if (hours >= 17 && hours <= 24) {
        greet = "Good Evening";
      }

      document.getElementById("greet").innerHTML = greet;
    }

    setInterval(displayTime, 1000);

    window.onload= displayTime;
  </script>-->

<script>
  function displayTime() {
    var currentTime = new Date();
    var hours = currentTime.getHours();
    var minutes = currentTime.getMinutes();
    var day = currentTime.getDay();
    var date = currentTime.getDate();
    var month = currentTime.getMonth();
    var year = currentTime.getFullYear();

    //Get the greeting based on the time of day
    var greeting;
    if (hours < 12) {
      greeting = "Good Morning";
    } else if (hours >= 12 && hours <= 17) {
      greeting = "Good Afternoon";
    } else {
      greeting = "Good Evening";
    }

    //Get the day of the week
    var daysOfWeek = ["Sun", "Mon", "Tues", "Wed", "Thu", "Fri", "Sat"];
    var dayOfWeek = daysOfWeek[day];

    //Get the month of the year
    var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
    var monthOfYear = months[month];

    //Convert 24-hour time to 12-hour time
    if (hours > 12) {
      hours = hours - 12;
    }
    if (hours == 0) {
      hours = 12;
    }
    if (minutes < 10) {
      minutes = "0" + minutes;
    }
    var timeOfDay = (hours < 12) ? "PM" : "AM";

    //Update the time and date elements on the page
    document.getElementById("greeting").innerHTML = greeting;
    document.getElementById("time").innerHTML = hours + ":" + minutes;
    document.getElementById("timeOfDay").innerHTML = timeOfDay;
    document.getElementById("day").innerHTML = dayOfWeek;
    document.getElementById("date").innerHTML = date;
    document.getElementById("month").innerHTML = monthOfYear;
    document.getElementById("year").innerHTML = year;
  }

  window.onload= setInterval(displayTime, 1000);
</script>

<script>
  $(document).ready(function() {
    setList(0);
    setList(1);

  });

  function ikon(opt) {
    var ikon = "";
    if (opt.indexOf("Instagram") >= 0) {
      ikon = "<span class=\"fs-ig\"><i class=\"fab fa-instagram\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Çok") >= 0) {
      ikon = "<span class=\"fs-star\"><i class=\"fas fa-meteor\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Facebook") >= 0) {
      ikon = "<span class=\"fs-fb\"><i class=\"fab fa-facebook-f\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Youtube") >= 0) {
      ikon = "<span class=\"fs-yt\"><i class=\"fa fa-youtube-play\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Twitter") >= 0) {
      ikon = "<span class=\"fs-tw\"><i class=\"fa fa-twitter\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Google") >= 0) {
      ikon = "<span class=\"fs-gp\"><i class=\"fa fa-google-plus\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Swarm") >= 0) {
      ikon = "<span class=\"fs-fsq\"><i class=\"fa fa-forumbee\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Dailymotion") >= 0) {
      ikon = "<span class=\"fs-dm\"><i class=\"fa fa-hospital-o\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Periscope") >= 0) {
      ikon = "<span class=\"fs-pc\"><i class=\"fa fa-map-marker\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Soundcloud") >= 0) {
      ikon = "<span class=\"fs-sc\"><i class=\"fa fa-soundcloud\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Vine") >= 0) {
      ikon = "<span class=\"fs-vn\"><i class=\"fa fa-vine\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Spotify") >= 0) {
      ikon = "<span class=\"fs-sp\"><i class=\"fa fa-spotify\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Snapchat") >= 0) {
      ikon = "<span class=\"fs-snap\"><i class=\"fab fa-snapchat-ghost\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Pinterest") >= 0) {
      ikon = "<span class=\"fs-pt\"><i class=\"fa fa-pinterest-p\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("iTunes") >= 0) {
      ikon = "<span class=\"fs-apple\"><i class=\"fa fa-apple\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Müzik") >= 0) {
      ikon = "<span class=\"fs-music\"><i class=\"fa fa-music\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Vimeo") >= 0) {
      ikon = "<span class=\"fs-videmo\"><i class=\"fa fa-vimeo\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Ekşi") >= 0) {
      ikon = "<span class=\"fs-eksi\"><i class=\"fa fa-tint\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Telegram") >= 0) {
      ikon = "<span class=\"fs-telegram\"><i class=\"fab fa-telegram\" aria-hidden=\"true\"></i> </span>";

    }else if (opt.indexOf("IMDB") >= 0) {
      ikon = "<span class=\"fs-imdb\"><i class=\"fa fa-imdb\" aria-hidden=\"true\"></i> </span>";

    }else if (opt.indexOf("Twitch") >= 0) {
      ikon = "<span class=\"fs-twc\"><i class=\"fa fa-twitch\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Tik") >= 0) {
      ikon = "<span class=\"fs-tik\"><i class=\"fab fa-tiktok\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Zomato") >= 0) {
      ikon = "<span class=\"fs-zom\"><i class=\"fa fa-cutlery\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Amazon") >= 0) {
      ikon = "<span class=\"fs-amaz\"><i class=\"fa fa-amazon\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Tumblr") >= 0) {
      ikon = "<span class=\"fs-tumb\"><i class=\"fa fa-tumblr-square\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Yandex") >= 0) {
      ikon = "<span class=\"fs-yndx\"><i class=\"fa fa-yoast\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Linkedin") >= 0) {
      ikon = "<span class=\"fs-lnk\"><i class=\"fa fa-linkedin\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Yahoo") >= 0) {
      ikon = "<span class=\"fs-yahoo\"><i class=\"fa fa-yahoo\" aria-hidden=\"true\"></i> </span>";

    } else if (opt.indexOf("Private") >= 0) {
      ikon = "<span class=\"fs-private\"><i class=\"fa fa-times\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Discord") >= 0) {
      ikon = "<span class=\"fs-discord\"><i class=\"fab fa-discord\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Vkontakte") >= 0) {
      ikon = "<span class=\"fs-vk\"><i class=\"fab fa-vk\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("SS2") >= 0) {
      ikon = "<span class=\"fs-hizli\"><i class=\"fa fa-diamond\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("SS3") >= 0) {
      ikon = "<span class=\"fs-hizli\"><i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("S44") >= 0) {
      ikon = "<span class=\"fs-orta\"><i class=\"fa fa-compress\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("S53") >= 0) {
      ikon = "<span class=\"fs-hizli\"><i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("S63") >= 0) {
      ikon = "<span class=\"fs-hizli\"><i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("S73") >= 0) {
      ikon = "<span class=\"fs-hizli\"><i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("S83") >= 0) {
      ikon = "<span class=\"fs-hizli\"><i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("Türkk") >= 0) {
      ikon = "<span class=\"fs-hizli\"><i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("S00") >= 0) {
      ikon = "<span class=\"fs-hizli\"><i class=\"fa fa-arrow-up\" aria-hidden=\"true\"></i> </span>";
    } else if (opt.indexOf("S90") >= 0) {
      ikon = "<span class=\"fs-orta\"><i class=\"fa fa-compress\" aria-hidden=\"true\"></i> </span>";
    }




    /*else if (opt.indexOf("Hızlı") >= 0)  {
                    ikon = "<span class=\"fs-ei\"><i class=\"fa fa-money\" aria-hidden=\"true\"></i> </span> "         
      }*/
    else {
      ikon = "<span class=\"\"><i class=\"fas fa-meteor\" aria-hidden=\"true\"></i> </span>  ";
    }
    return ikon;
  }
</script>

<script>
  function setList(val) {

    /* orders */
    if (val == 0) {
      $("#orders-drop").empty();
      $("#orderform-service option").each(function() {
        var ico = ikon($(this).text());
        $("#orders-drop").append('<button data-id="'+$(this).val()+'" id="serviceItem" class="dropdown-item" type="button" onclick="selectOrder(' + $(this).val() + ')">' + ico + $(this).text() + '</button>');
      });
      /*if(this.selected) {*/
      var e = document.getElementById("orderform-service");
      var selected = e.options[e.selectedIndex].text;
      var ico = ikon(selected);
      $("#serviceTitle").html(ico + selected);
      /*}else {
           var ico = ikon($("#orderform-service option:nth-child(1)").text());              
          $("#serviceTitle").html(ico + $("#orderform-service option:nth-child(1)").text());         
                      }            */

    } else if (val == 1) {
      /* SERVICES */

      $("#category-drop").empty();
      $("#orderform-category option").each(function() {
        var ico = ikon($(this).text());
        $("#category-drop").append('<button data-text="'+$(this).text()+'" data-id="'+$(this).val()+'" id="categoryItem" class="dropdown-item" type="button" onclick="selectCategory(' + $(this).val() + ')">' + ico + $(this).text() + '</button>');
      });

      /* if(this.selected) {*/
      var e = document.getElementById("orderform-category");
      var selected = e.options[e.selectedIndex].text;
      var ico = ikon(selected);
      $("#categoryTitle").html(ico + selected);
      /*}else {      
          var ico = ikon($("#orderform-category option:nth-child(1)").text());              
          $("#categoryTitle").html(ico + $("#orderform-category option:nth-child(1)").text());
                   } */

    }
  }
  $(function(ready) {
    $("#orderform-service").change(function() {
      setList(0);
    });
    $("#orderform-category").change(function() {
      setList(1);
    });
  });


  function selectOrder(val) {
    $('#orderform-service').val(val);
    $("#orderform-service").trigger("change");
    var ico = ikon($("#orderform-service option[value='" + val + "']").text());
    $("#serviceTitle").html(ico + $("#orderform-service option[value='" + val + "']").text());
  }
  $("#serviceItem").click(function() {
    $("#serviceTitle").html($(this).html());
  });

  function selectCategory(val) {
    $('#orderform-category').val(val);
    $("#orderform-category").trigger("change");
    var ico = ikon($("#orderform-category option[value='" + val + "']").text());
    $("#categoryTitle").html(ico + $("#orderform-category option[value='" + val + "']").text());
  }
  $("#categoryItem").click(function() {
    $("#categoryTitle").html($(this).html());
  });
</script>

<script>
  function chk()
  {
    var a=document.getElementById("orderform-service").value;
    document.getElementById("span_sh").textContent="ID : "+a;
  }
</script>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

<script>
  const changeCatBtns = document.querySelectorAll('.CatFltr');

  if (changeCatBtns[0]) {
    const orderFormCats = document.getElementById('orderform-category');
    var realData = orderFormCats.innerHTML;

    const categories = [];

    [...changeCatBtns].forEach(btn => {
      categories.push(btn.dataset.changeCat);
      btn.addEventListener('click', e => {
        const val = btn.getAttribute('data-change-cat');
        const orderFormCats = document.getElementById('orderform-category');
        const options = document.querySelectorAll('#orderform-category-copy option');

        [...changeCatBtns].forEach(bt => {
          bt.classList.remove('active');
        });
        btn.classList.add('active');

        const newOptions = [];
        [...options].forEach(el => {
          if (val == 'other') {
            // if el inner text is not in categories
            let isIn = false;
            [...categories].forEach(cat => {
              if (cat.toLowerCase() == 'other' || cat == null || cat == "" || cat.trim() == '' || cat.trim == null) {

              } else {
                if (el.innerText.toLowerCase().includes(cat.toLowerCase())) {
                  isIn = true;
                }
              }
            });
            if (!isIn) {
              newOptions.push(el);
            }
          } else {
            if (el.innerText.toLowerCase().includes(val.toLowerCase())) {
              newOptions.push(el);
            }
          }
        });
        const newOptionsHtml = [];
        [...newOptions].forEach(el => {
          newOptionsHtml.push(el.outerHTML);
        });
        orderFormCats.innerHTML = newOptionsHtml.join('');

        $('#orderform-category').trigger('change');
      });
    });

    /**
       * copy order form data hidden
       */
    setTimeout(() => {
      const orderFormCopy = document.createElement('select');
      orderFormCopy.setAttribute('id', 'orderform-category-copy');
      orderFormCopy.style.display = 'none';
      orderFormCopy.innerHTML = realData;
      orderFormCats.parentNode.insertBefore(orderFormCopy, orderFormCats);
    }, 2000)

    const nocWrapper = document.getElementById('noc-wrapper');
    nocWrapper.style.display = 'none';
    setTimeout(() => {
      nocWrapper.style.display = 'block';
    }, 2001);
  }
  //* end */
</script>
<script>
  $(document).ready(function(){
    if (document.cookie.indexOf('popupShown=true') == -1) {
      // Show the popup
      $('#updtModal').modal('show');
      // Set a cookie to indicate that the popup has been shown
      document.cookie = 'popupShown=true';
    }
  });
</script>
<script>
  function startOnboardingNO() {
    introJs().setOptions({
      showProgress: true,
      showBullets: false,
      showStepNumbers: false,
      showSkip: false, // Set this option to false
      doneLabel: 'Done',
      nextLabel: 'Next',
      prevLabel: 'Previous'
    }).start();
  }
</script>

<!-- Search Service Modal -->
<div class="modal servmodal  fade" id="srcbyID" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title" style="color: #fff;">Search By ID</h4>
      </div>
      <div class="modal-body">
        <form class="servbyid" method='get' action=''>
          <input placeholder="Input Service ID" name='select_service_id' type='number' class="form-control mb-2" value=''>
          <button type='submit' onclick="gototab();" class="btn btn-primary"> Go </button>
        </form>
      </div>
    </div>
  </div>
</div>
<style>
  .yt-dropdown {
    position: absolute;
    background-color: #fff;
    width: -webkit-fill-available;
    max-height: 200px;
    right: 18px;
    left: 18px;
    border-radius: 27px;
    overflow-y: scroll;
    border: 1px solid #ccc;
    border-top: none;
    z-index: 1;
    display: none;
  }

  .yt-dropdown.show {
    display: block;
  }

  .yt-dropdown-item {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
  }

  .yt-dropdown-item:hover {
    background-color: #eee;
  }

  .yt-dropdown-item img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .yt-dropdown-item-title {
    font-weight: bold;
  }
  .well.bcwell {
    max-height: 700px;
    overflow: auto;
    padding: 0;
  }
</style>

<script>
  const linkLabel = document.querySelector('label[for="field-orderform-fields-link"]');
  const quantityLabel = document.querySelector('label[for="field-orderform-fields-quantity"]');

  console.log(linkLabel.innerHTML);
  console.log(quantityLabel.innerHTML);
</script>

<!-- SweetAlert -->
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11"></script>
<script>
  // Check if error alert exists
  if ($('.error-alert').length) {
    // Convert error alert to SweetAlert modal
    Swal.fire({
      title: 'Error',
      html: $('.error-alert').html(),
      icon: 'error',
      confirmButtonText: 'Lets Go!'
    });
  }

  // Check if the page has any success1-alert
  if($('.success1-alert').length > 0){
    // Show a success notification
    Swal.fire({
      title: 'Success!',
      html: $('.success1-alert').html(),
      icon: 'success',
      confirmButtonText: 'Lets Go!',
    });
  }

  // Check if the page has any success2-alert
  if($('.success2-alert').length > 0){
    // Show a success notification
    Swal.fire({
      title: 'Success!',
      html: $('.success2-alert').html(),
      icon: 'success',
      confirmButtonText: 'Lets Go!',
    });
  }
</script>

<!--<script>
  $(document).ready(function() {
    // Function to scroll the list to the left
    $("#slideLeft").on("click", function() {
      $("#filtrButns").animate({ scrollLeft: '-=100' }, 500); // Adjust the value to control the scroll speed
    });

    // Function to scroll the list to the right
    $("#slideRight").on("click", function() {
      $("#filtrButns").animate({ scrollLeft: '+=100' }, 500); // Adjust the value to control the scroll speed
    });
  });
</script>-->

<script>
  // Function to change the scrollbar style for ul.servFiltr
  function customizeScrollbar() {
    const element = document.querySelector('ul.servFiltr');
    if (element) {
      // Set the scrollbar thumb color
      element.style.scrollbarColor = '#a8a8a8 #f2f2f2';

      // Set the scrollbar track color
      element.style.scrollbarTrackColor = '#f2f2f2';

      // Optionally, you can set custom dimensions for the scrollbar thumb
      element.style.scrollbarWidth = 'thin';
      element.style.scrollbarThumbWidth = '10px';
    }
  }

  // Call the function to apply the style
  customizeScrollbar();

</script>

<!--<script>
  $(document).ready(function() {
    // Wait for the document to be ready

    // Check if the div#order_link exists
    if ($("#order_link").length) {
      // Create the HTML element
      var pasteButton = '<a id="pasteButton"><i class="fas fa-clone"></i></a>';

      // Append the element to the div#order_link
      $("#order_link").append(pasteButton);

      // Attach the click event listener using jQuery
      $("#pasteButton").on("click", function() {
        // Get the copied text from the clipboard
        navigator.clipboard.readText().then(function(text) {
          // Set the input field value to the copied text
          $("#field-orderform-fields-link").val(text);
        }).catch(function(error) {
          console.error("Unable to read clipboard data: " + error);
        });
      });
    }
  });
</script>-->


<script>
  $(document).ready(function(){
    $('.catsocialcount').slick({
      dots: false,
      slidesToShow: 1,
      slidesToScroll: 1,
      autoplay: true,
      pauseOnHover: true, // Pause the slider on hover
      autoplaySpeed: 2000,
      dots: false,
      arrows: false,
      infinite: true,
    });
  });
</script>

<script>
  // Function to update links
  function updateLinks() {
    console.log('Hey');

    // Get the .panel-body element
    var descriptionContent = $('#service_description .panel-body');

    // Extract the current content
    var content = descriptionContent.html();

    // Find all links in the content using a regular expression
    var linkRegex = /<a\s+(?:[^>]*?\s+)?href=["']([^"']*)["'][^>]*>(.*?)<\/a>|https?:\/\/[^\s<]+/g;

    // Replace each plain text link with a clickable link
    var updatedContent = content.replace(linkRegex, function (match, link, linkText) {
      if (link) {
        // Existing link, return unchanged
        return match;
      } else {
        // New URL, convert to a clickable link
        return '<a href="' + match + '" target="_blank">' + match + '</a>';
      }
    });

    // Update the content of the .panel-body element
    descriptionContent.html(updatedContent);
  }

  // Load the function when the window is loaded
  $(document).ready(function() {
    // Function to update links with a delay
    function updateLinksWithDelay() {
      setTimeout(updateLinks, 1000);
    }

    // Add event listeners to the dropdowns using plain JavaScript
    document.getElementById('orderform-category').addEventListener('input', updateLinksWithDelay);

    document.getElementById('orderform-service').addEventListener('input', updateLinksWithDelay);
  });
</script>



<!--<script>
  // Function to update links
  function updateLinks() {
    console.log('Hey');
    // Get the .panel-body element
    var descriptionContent = $('#service_description .panel-body');

    // Extract the current content
    var content = descriptionContent.html();

    // Find all links in the content using a regular expression
    var linkRegex = /https?:\/\/\S+/g;
    var matches = content.match(linkRegex);

    if (matches) {
      // Replace each plain text link with a clickable link
      matches.forEach(function (match) {
        var updatedContent = content.replace(match, '<a href="' + match + '" target="_blank">' + match + '</a>');
        content = updatedContent;
      });

      // Update the content of the .panel-body element
      descriptionContent.html(content);
    }
  }

  // Load the function when the window is loaded
  $(document).ready(function() {
    setTimeout(updateLinks, 1000); // Run one second after the page is loaded
  });
</script>-->


<script>
  function getUrlParameter(sParam) {
    var sPageURL = decodeURIComponent(window.location.search.substring(1));
    var sURLVariables = sPageURL.split('&');
    var sParameterName;
    var i;
    for (i = 0; i < sURLVariables.length; i++) {
      sParameterName = sURLVariables[i].split('=');
      if (sParameterName[0] === sParam) {
        return sParameterName[1] === undefined ? true : sParameterName[1];
      }
    }
  }

  // Check if the URL parameter "ordtype=subs" is present
  var ordType = getUrlParameter("ordtype");
  if (ordType === "subs") {
    $(function () {
      let subBtn = document.getElementById('subBtn');

      if (subBtn) {
        // Add a 2-second delay before simulating a click
        setTimeout(() => {
          subBtn.click();
        }, 2000);
      } else {
        console.error("Element with id 'subBtn' not found.");
      }
    });
  }
</script>

    </div>

    




<div class="integration-fixed integration-fixed__bottom-right">
    <style>
    .telegram-container {
        position: relative;
    }

    .telegram-button {
        width: 60px;
        height: 60px;
        bottom: 40px;
        right: 40px;
        background-color: transparent !important;
        color: #FFF !important;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        box-shadow: 2px 2px 3px #999;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
        transform: scale(0.9)
    }

    .telegram-button::after {
        content: '';
        position: absolute;
        width: 70%;
        height: 70%;
        background-color: #fff !important;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        z-index: -1;
    }

    .telegram-button svg {
        fill: #24A1DE;
        width: 60px;
    }

    .telegram-button:hover {
        transform: scale(1);
    }
</style>

</div>    <style>
    .whatsapp-button {
        width: 60px;
        height: 60px;
        bottom: 40px;
        right: 40px;
        background-color: #25d366;
        color: #FFF !important;
        border-radius: 50px;
        text-align: center;
        font-size: 30px;
        box-shadow: 2px 2px 3px #999;
        display: flex;
        align-items: center;
        justify-content: center;
        text-decoration: none !important;
        -webkit-transition: all 0.3s ease;
        -moz-transition: all 0.3s ease;
        -o-transition: all 0.3s ease;
        -ms-transition: all 0.3s ease;
        transition: all 0.3s ease;
        transform: scale(0.9)
    }

    .whatsapp-button svg {
        fill: #fff;
    }

    .whatsapp-button:hover {
        transform: scale(1);
        background-color: #1fcc5f;
    }
</style>

</div></div>
    <!--<div class="footer-top">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-8 col-md-offset-2">
            <div class="lstrid">
              <div class="row">
                <div class="col-md-6">
                  <h2>Try SMM BIRLA Today.</h2>
                  <ul>
                    <li><i class="fas fa-check"></i> 99.9% Uptime</li>
                    <li><i class="fas fa-check"></i> Affordable Price</li>
                    <li><i class="fas fa-check"></i> Best Support</li>
                  </ul>
                </div>
                <div class="col-md-6">
                  <ul class="footertopactbtn">
                    <li><a href="/signup">Sign Up For Free <i class="fas fa-arrow-right"></i></a></li>
                    <li><a href="/services">Explore Services <i class="fas fa-arrow-right"></i></a></li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <footer>
      <div class="container-fluid">
        <div class="row row-flex align-items-center">
          <div class="col-md-3">
            <div class="footerinfo">
              <img class="footerlogo" src="https://storage.perfectcdn.com/fcm9r8/px4as35l14pyhpjw.png">
              <p>Most Reliable & Trusted SMM Panel in the Industry with over 3years of Experience. We are the True Meaning of an Trusted SMM Panel.</p>
            </div>
          </div>
          <div class="col-md-2">
            <ul class="footerlinks">
              <p>Quick Links</p>
              <li><a href="/signup">Register at SMM BIRLA</a></li>
              <li><a href="/">Sign In at SMM BIRLA</a></li>
              <li><a href="/services">Explore Services</a></li>
              <li><a href="/api">API Docs</a></li>
            </ul>
          </div>
          <div class="col-md-2">
            <ul class="footerlinks">
              <p>Imp. Resources</p>
              <li><a href="/terms">Terms & Conditions</a></li>
              <li><a href="/terms">Disclaimer Policy</a></li>
              <li><a href="/terms">Privacy Policy</a></li>
              <li><a href="/terms">Refund Policy</a></li>
            </ul>
          </div>
          <div class="col-md-2">
            <ul class="footerlinks">
              <p>Company</p>
              <li><a href="#">About Us</a></li>
              <li><a href="/blog">Blog</a></li>
              <li><a href="#">Affiliates</a></li>
              <li><a href="#">Expertise</a></li>
            </ul>
          </div>
          <div class="col-md-3">
            <ul class="footerlinks">
              <p>Powered By</p>
            </ul>
            <img class="ftrpymtimg" src="https://i.imgur.com/XwTXa7A.png">
          </div>
        </div>
      </div>
    </footer>-->
    <!--<div class="footer-btm">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <p>©2021-2023 www. {{site["site_name"] }}.com or it's affiliates</p>
          </div>
        </div>
      </div>
    </div>-->

    <!--<footer class="footer">
      <div class="container-fluid">
        <div class="row">
          <div class="col-md-12">
            <ul>
              <li><a href="/terms">Terms</a></li>
              <li><a href="/terms">Privacy Policy</a></li>
              <li><a href="/services">Services</a></li>
              <li><a href="/blog">Blog</a></li>
              <li><a href="/api">API</a></li>
            </ul>
          </div>
        </div>
        <div class="row row-flex align-items-center justify-content-center">
          <div class="col-md-3">
            <img src="https://storage.perfectcdn.com/fcm9r8/px4as35l14pyhpjw.png" class="footerimg">
          </div>
          <div class="col-md-9">
            <p>©2021-2024 www. {{site["site_name"] }}.com or it's affiliates</p>
          </div>
        </div>
      </div>
    </footer>-->


    <!--<div class="footerfoot">
      <div class="container">

      </div>
    </div>-->

    <!-- Locomotive Scroll JS -->
    <script src="https://cdn.jsdelivr.net/npm/locomotive-scroll/dist/locomotive-scroll.min.js"></script>
        <script type="text/javascript"  src="https://storage.perfectcdn.com/libs/jquery/1.12.4/jquery.min.js" >
          </script>
        <script type="text/javascript"  src="https://storage.perfectcdn.com/global/yl65qr86p7yn1l29.js" >
          </script>
        <script type="text/javascript"  src="https://storage.perfectcdn.com/global/plfhebjcep5qq2i8.js" >
          </script>
        <script type="text/javascript"  src="https://storage.perfectcdn.com/global/3y01tbac13p45qiw.js" >
          </script>
        <script type="text/javascript"  src="https://storage.perfectcdn.com/global/gz6yihmsokdbe1lm.js" >
          </script>
        <script type="text/javascript"  src="https://storage.perfectcdn.com/fcm9r8/snxwayfxxfpnb7fc.js" >
          </script>
        <script type="text/javascript"  src="https://storage.perfectcdn.com/global/p6eoe60wqq7bd33a.js" >
          </script>
        <script type="text/javascript" >
            window.modules.layouts = {"theme_id":1,"auth":1,"live":true,"csrftoken":"A4s_pVNkv21XlrUneY-KFiw17DyxjT4sSSp2d5Jhomto313AAhD-GA_92FYy28hvY0aBC_i5R0sTaAYD4jDUOg=="};
          </script>
       
        <script type="text/javascript" >
            window.modules.select = [];
          </script>
        <script type="text/javascript" >
            window.modules.alerts = {"alerts":[]};
          </script>
        <script type="text/javascript" >
          </script>
    


    <!-- Counter Up -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Counter-Up/1.0.0/jquery.counterup.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>
    <script>
      $('.counter').counterUp({
        delay: 30,
        time: 1000
      });
    </script>

    <!-- Slick -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script>
      $(document).ready(function(){
        $('.desktopslider').slick({
          dots: true,
          arrows: false,
          infinite: true,
          speed: 5000,
          fade: true,
          cssEase: 'linear',
          autoplay: true,
          autoplaySpeed: 10000
        });
      });

      $(document).ready(function(){
        $('.servSlider').slick({
          slidesToShow: 3,
          slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 2000,
          dots: true,
          arrows: false,
          infinite: true,
          responsive: [
            {
              breakpoint: 768,
              settings: {
                slidesToShow: 2
              }
            },
            {
              breakpoint: 480,
              settings: {
                slidesToShow: 1
              }
            }
          ]
        });
      });

      $(document).ready(function(){
        $('.featslider').slick({
          slidesToShow: 2,
          slidesToScroll: 1,
          autoplay: true,
          autoplaySpeed: 2000,
          dots: true,
          arrows: false,
          infinite: true,
          responsive: [
            {
              breakpoint: 768,
              settings: {
                slidesToShow: 2
              }
            },
            {
              breakpoint: 480,
              settings: {
                slidesToShow: 1
              }
            }
          ]
        });
      });
    </script>

    <!-- Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>

    <!-- Initialize Swiper -->
    <script>
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 0,
        centeredSlides: true,
        speed: 3000,
        autoplay: {
          delay: 0,
        },
        loop: true,
        slidesPerView: 'auto',
        allowTouchMove: false,
        disableOnInteraction: true,
      });
    </script>

        <!-- Profile Picture -->
    <script>
      const fileInput = document.getElementById('fileInput');
      const profilePictures = document.querySelectorAll('.profilePicture');
      const maxSize = 1024 * 1024; // 1MB

      function uploadPicture(event) {
        const file = fileInput.files[0];
        if (file.size > maxSize) {
          alert('File size exceeds 1MB. Please upload a smaller file.');
          return;
        }
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          const img = new Image();
          img.src = reader.result;
          img.onload = function () {
            const canvas = document.createElement('canvas');
            const ctx = canvas.getContext('2d');
            const squareSize = Math.min(img.width, img.height);
            canvas.width = squareSize;
            canvas.height = squareSize;
            const offsetX = (img.width - squareSize) / 2;
            const offsetY = (img.height - squareSize) / 2;
            ctx.drawImage(img, offsetX, offsetY, squareSize, squareSize, 0, 0, squareSize, squareSize);
            const croppedDataURL = canvas.toDataURL('image/jpeg');
            localStorage.setItem('profilePicture', croppedDataURL);
            profilePictures.forEach((profilePicture) => {
              profilePicture.src = croppedDataURL;
            });
          };
        };
      }

      const storedPicture = localStorage.getItem('profilePicture');
      if (storedPicture) {
        profilePictures.forEach((profilePicture) => {
          profilePicture.src = storedPicture;
        });
      }
    </script>

    <!-- Order Form -->
    <script>
      function getUrlParameter(sParam) {
        var sPageURL = decodeURIComponent(window.location.search.substring(1));
        var sURLVariables = sPageURL.split('&');
        var sParameterName;
        var i;
        for (i = 0; i < sURLVariables.length; i++) {
          sParameterName = sURLVariables[i].split('=');
          if (sParameterName[0] === sParam) {
            return sParameterName[1] === undefined ? true : sParameterName[1];
          }
        }
      }

      var select_service_id = getUrlParameter("select_service_id");
      if (select_service_id) {
        var selectSerCatID = window.modules.siteOrder.services[select_service_id].cid;
        let orderCat = document.getElementById('orderform-category');
        let orderSer = document.getElementById('orderform-service');

        $(function () {
          orderCat.querySelector('[selected]').removeAttribute('selected');
          console.log(selectSerCatID);
          orderCat.querySelector('[value="'+ selectSerCatID +'"]').setAttribute('selected', 'selected');
          orderCat.value = selectSerCatID;

          var event = document.createEvent('HTMLEvents');
          event.initEvent('change', true, false);
          orderCat.dispatchEvent(event);

          setTimeout(() => {
            let controlSel = orderSer.querySelector('[selected]')
            if (controlSel) {
              controlSel.removeAttribute('selected');
            }
            console.log(select_service_id);
            orderSer.querySelector('[value="'+ select_service_id +'"]').setAttribute('selected', 'selected');
            orderSer.value = select_service_id;
            orderSer.dispatchEvent(event);

          }, 500);
        });
      }
    </script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js" type="text/javascript"></script>

    <script>
      const sidebarBtn = document.querySelector("#sidebarbtn");
      const navbarBottom = document.querySelector(".navbarbottom");

      sidebarBtn.addEventListener("click", () => {
        navbarBottom.classList.toggle("expanded");
        sidebarBtn.classList.toggle("tog");
      });

      var dropdownButton = document.querySelector('.navbarbottom ul li.smbtn > a');
      var dropdownMenu = document.querySelector('.navbarbottom ul li.smbtn ul.sbsub');

      dropdownButton.addEventListener('click', function() {
        dropdownMenu.classList.toggle('show');
      });

      document.addEventListener('click', function(event) {
        if (!dropdownMenu.contains(event.target) && !dropdownButton.contains(event.target)) {
          dropdownMenu.classList.remove('show');
        }
      });

      $('a.smbtn').on('click', function() {
        var $p = $(this).find('p');
        if ($p.text() == 'Show more') {
          $p.text('Show less');
        } else {
          $p.text('Show more');
        }
      });
    </script>
    
    <!-- Intro JS -->
    <!--<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/4.1.0/intro.min.js"></script>
    <script>
      // Wait for the DOM to load
      document.addEventListener("DOMContentLoaded", function() {
        // Disable the preloader div after 2 seconds
        setTimeout(function() {
          // Get the preloader div
          var preloader = document.querySelector(".preloader");

          // Slide up the preloader div using CSS transitions
          preloader.style.transition = "all 0.5s ease-out";
          preloader.style.transform = "translateY(-100%)";

          // Disable the preloader div after the transition is complete
          setTimeout(function() {
            preloader.style.display = "none";
          }, 500);
        }, 2000);
      });
    </script>-->

    <!-- Google translate 
    <script src="https://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit" type="text/javascript"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/js/bootstrap-select.min.js" type="text/javascript"></script>
    <div id="google_translate_element" style="display: none;"></div>
    <script type="text/javascript">
      function googleTranslateElementInit() {
        new google.translate.TranslateElement({ pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, autoDisplay: false }, 'google_translate_element');
      }

      function translateLanguage(lang) {
        googleTranslateElementInit();
        var $frame = $('.goog-te-menu-frame:first');
        if (!$frame.size()) {
          alert("Error: Could not find Google translate frame.");
          return false;
        }
        $frame.contents().find('.goog-te-menu2-item span.text:contains(' + lang + ')').get(0).click();
        return false;
      }

      $(function(){
        $('.selectpicker').selectpicker();
      });
    </script>

    <script>
      function googleTranslateElementInit() {
        var container = document.querySelector('.google-translate-buttons');
        var langs = google.translate.TranslateElement.prototype.getSupportedLanguages();
        for (var i = 0; i < langs.length; i++) {
          var lang = langs[i];
          var button = document.createElement('button');
          button.textContent = lang;
          button.addEventListener('click', function() {
            google.translate.TranslateElement.prototype.handleSelection(this.textContent);
          });
          container.appendChild(button);
        }
      }
    </script>
    <script src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>-->
    <script>
      // Get the button
      let topgoTo = document.getElementById("topgoTo");

      // When the user scrolls down 20px from the top of the document, show the button
      window.onscroll = function() {scrollFunction()};

      function scrollFunction() {
        if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
          topgoTo.style.bottom = "20px";
        } else {
          topgoTo.style.bottom = "-60px";
        }
      }

      // When the user clicks on the button, scroll to the top of the document
      function topFunction() {
        document.body.scrollTop = 0;
        document.documentElement.scrollTop = 0;
      }
    </script>


    -->
  </body>
{% else %}

 </head>

    <body class="">
    <!-- Google Tag Manager (noscript) -->
    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-TQMJ6XB3"
                      height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
    <!-- End Google Tag Manager (noscript) -->


    <button onclick="topFunction()" id="topgoTo" title="Go to top"><i class="fas fa-arrow-up"></i></button>
    <!--    <div class="preloader">
      <img src="https://i.imgur.com/pjjATN3.gif">
    </div>
    -->
        <center>
      <nav class="navbar guestnav navbar-default navbar-fixed-top ">
        <div class="container-fluid">
          <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
              <span class="sr-only">Toggle navigation</span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
              <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/">
                            <img src="{{ site['logo'] }}" alt="{{
                        site["site_name"] }}" title="{{
                        site["site_name"] }}">
                          </a>
          </div>
          <div id="navbar" class="collapse navbar-collapse">
            <!---->
            <ul class="nav navbar-nav navbar-right">
                            <li >
                <a href="/blog" >
                                    <i class="navbar-icon fas fa-newspaper"></i>
                                    Blog
                </a>
              </li>
                            <li >
                <a href="/terms" >
                                    <i class="navbar-icon fas fa-balance-scale"></i>
                                    Terms
                </a>
              </li>
                            <li >
                <a href="/api-docs" >
                                    <i class="navbar-icon fas fa-link"></i>
                                    API
                </a>
              </li>
                            <li >
                <a href="/ai-tools-library" >
                                    <i class="navbar-icon fab fa-galactic-republic"></i>
                                    AI Tools
                </a>
              </li>
                            <li >
                <a href="/services" >
                                    <i class="navbar-icon fab fa-galactic-republic"></i>
                                    services
                </a>
              </li>
              <li class="ctamenu"><a class="ctabtn frstctabtn" href="/">Log In</a></li>
              <li class="ctamenu ctaregis"><a class="ctabtn" href="/signup">Register</a></li>
            </ul>
          </div>
        </div>
      </nav>
    </center>


  
{% endif %}




<script src="https://unpkg.com/wavesurfer.js"></script>

<script>


 $('.langs-btn').hover(function(){
    $('.langs-btn-content').toggle();
  });
  
    $('.currency-btn').hover(function(){
    $('.currency-btn-content').toggle();
  });
  
  
 function changeLang(newLang){
        $.ajax
        ({ 
            url: '/account/change_lang/',
            data: {lang: newLang},
            type: 'post',
            success: function(result)
            {
                
               location.href  = "";
            }
        });
    }
    
    var wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple',
    mediaControls:true
});
wavesurfer.load('{{settings['music_url']}}');

wavesurfer.on('ready', wavesurfer.play.bind(wavesurfer));


</script>




