<!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.0">

        <title>{% if pagetitle %}  {{ pagetitle }}  {% else %} {{ title }} {% endif %} </title>
        <meta name="keywords" content="{% if pagekeywords %} {{ pagekeywords }} {% else %} {{ site["keywords"]}}  {% endif %}">
        <meta name="description" content="{% if pagedescription %} {{ pagedescription }} {% else %} {{ site['description'] }}  {% endif %}">
                    {% 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]-->
        

<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>




        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    
  
      
    </head>
    <body>
              

            <!DOCTYPE html>
            {% for lang in site['languages'] %}
{% if lang['active'] %}
<html lang="{{ lang['code'] }}"  data-bs-theme="dark" >
{% 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>{% if pagetitle %}  {{ pagetitle }}  {% else %} {{ title }} {% endif %} </title>
     <meta name="keywords" content="{% if pagekeywords %} {{ pagekeywords }} {% else %} {{ site["keywords"]}}  {% endif %}">
        <meta name="description" content="{% if pagedescription %} {{ pagedescription }} {% else %} {{ site['description'] }}  {% endif %}">
                    <meta property="og:description" content="{% if pagedescription %} {{ pagedescription }} {% else %} {{ site['description'] }}  {% endif %}" />
  {% 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]-->

        <!-- ########## ALL CDN Link Below ########## -->
        <!-- Google Font CDN -->
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
        <link
        href="https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,100..900;1,100..900&display=swap"
        rel="stylesheet"
        />

        <!-- Iconify Icon -->
        <script src="https://cdn.jsdelivr.net/npm/iconify-icon@2.1.0/dist/iconify-icon.min.js"></script>

        <!-- Swiper JS -->
        <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"
        />
<style>
  :root{
        --primary-color: #804aff !important;
  }
  #dashboard #sidebar .sidebar_menu .menu_item .menu_link{
    padding: 5px 30px !important;
  }
  /* Hide scrollbar for Chrome, Safari and Opera */
::-webkit-scrollbar {
    display: none;
}
  .nav_right .nav_right_btn{
      display: inline !important;
        gap: 10px !important;

}


  a{
    text-decoration: none !important;
  }
  .daymode .cat_filter_wrap .filter_item.active {
    background-color: #0099FF !important;
  }
  .dropdown-menu > li > a{
    color: white !important;
  }
  .daymode .dropdown-menu > li > a{
    color: black !important;
        padding: 0.25rem 1rem;
  }
  textarea.form-control {
    height: 350px;
}
  .form-control{
    
        height: 45px;
  }
     .daymode .card-text span{
        color: #101010 !important;
        }
                   .user_box {
                     padding-top: 0px !important;
                     padding-bottom: 0px !important;
                   }
                   #sidebar {
                     overflow: hidden !important;
                   }
                   .auth .sidebar_menu {
                     overflow: auto !important;
                     height: 100% !important;
                   }
                   @media only screen and (max-width: 1700px) {
                     .bg_sidebars {
    bottom: -260px !important;
  } 
                   }
                    @media only screen and (max-width: 1440px) {.bg_sidebars {
    bottom: -300px !important;
                   }}
                   .bg_sidebars {
  position: absolute;
  bottom: -155px;
  left: 0;
  pointer-events: none;
  opacity: 0.4;
  z-index: -1;
}
.bg_sidebars img {
  width: 120%;
}

 
                   @media only screen and (max-width: 550px) {
                     .bg_sidebars {
    bottom: -349px;
    left: -14px;
                     }}
                   

html footer{display:none !important;}.daymode .panel-body{color:#000 !important;}
@media only screen and (max-width: 991px) { 
  body .header_right.d-none-desk {
    display: flex !important;
            gap: 5px !important;
    margin-left:7px !important;
  }
        } 
  .search-dropdown .input-wrapper .form-control {
    padding-left: calc(10px + 24px) !important;
}
  .fa, .fas {
    font-family: "Font Awesome 5 Pro" !important;
  }
  button.currency_button.dropdown-toggle::after {
    display: none !important;
    content: none !important;
}
  .user_sidebar .currency_btn .currency_button, #dashboard #content #header .currency_btn .currency_button{

height: 32px !important;
}
  


@media only screen and (max-width: 550px) {
    #dashboard #content #header .currency_btn .currency_button {
        padding: 5px 10px;
        font-size: 20px !important;
    }
}



      </style>

        <!-- Custom Header If there Any -->
        

<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>

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-9XKP27326S"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-9XKP27326S');
</script>

                   <link rel="stylesheet" type="text/css" href="https://storage.perfectcdn.com/o9v0gb/b7w88m27t5mw9iq5.css">
					<link rel="stylesheet" type="text/css" href="https://res.cloudinary.com/dqpjh6z2o/raw/upload/v1742369307/bzpg57qvja4ecqpiqcrw.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/o9v0gb/lxiu2au9fgs2x3hk.css">
					<link rel="stylesheet" type="text/css" href="https://storage.perfectcdn.com/o9v0gb/406u8tgmozp1b3j3.css">
                <script>
            window.modules = {};
        </script>
      
      
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css" integrity="sha512-Kc323vGBEqzTmouAECnVceyQqyqdsSiqLQISBL29aUW4U/M7pSPA/gEUZQqv1cwx4OnYxTxve5UMg5GT6L4JJg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
      
      
      
      
      
    </head>
	{% if user['auth'] %}
	
         <body id="body" class="">
              <script>
        if (localStorage.getItem("smmxzCurrentMode")) {
          const bodyFire2 = document.getElementById("body");
          const currentTheme = document.documentElement.getAttribute('data-bs-theme');
          document.documentElement.setAttribute('data-bs-theme', 'light');
          bodyFire2.classList.add("daymode");
        }
      </script>
      <section id="dashboard">
      <div id="sidebar_active_blur" class="d-none"></div>
      <div id="sidebar">
      <a href="/" class="sider_logo">
          <img src="{{ site['logo'] }}" class="img-fluid logo-white" alt="{{ site['site_name'] }} ">
          <img src="{{ site['logo'] }}" class="img-fluid logo-color" alt="{{ site['site_name'] }} ">
        </a>
        <div class="user_box">
          <div class="user_avatar">
            <img src="https://static.vecteezy.com/system/resources/thumbnails/048/216/761/small/modern-male-avatar-with-black-hair-and-hoodie-illustration-free-png.png" class="img-fluid avatar_images profilePicture" alt="SMM Panel Avatar Image">
          </div>
          <h4>{{ user["username"]  }}</h4>
          <h6>Balance: {{ user["balance"] }}</h6>
        </div>
        <ul class="sidebar_menu">
                    		<li class="menu_item">
									<a href="/updates" class="menu_link" >
																					<i class="navbar-icon fas fa-bells"></i>
																				Updates
									</a>
								</li>
							                		<li class="menu_item">
									<a href="/" class="menu_link" >
																					<i class="navbar-icon fad fa-cart-arrow-down"></i>
																				New order
									</a>
								</li>
							                		<li class="menu_item">
									<a href="/orders" class="menu_link" >
																					<i class="navbar-icon fas fa-ambulance"></i>
																				Orders
									</a>
								</li>
							                		<li class="menu_item">
									<a href="/addfunds" class="menu_link" >
																					<i class="navbar-icon fas fa-credit-card"></i>
																				Add funds
									</a>
								</li>
							                		<li class="menu_item">
									<a href="/services" class="menu_link" >
																					<i class="navbar-icon fas fa-clipboard-list-check"></i>
																				Services
									</a>
								</li>
							                		<li class="menu_item">
									<a href="/tickets" class="menu_link" >
																					<i class="navbar-icon fad fa-user-headset"></i>
																				Support
									</a>
								</li>
							                		<li class="menu_item">
									<a href="/affiliates" class="menu_link" >
																					<i class="navbar-icon far fa-share"></i>
																				Affiliates
									</a>
								</li>
							                		<li class="menu_item">
									<a href="/terms" class="menu_link" >
																					<i class="navbar-icon fas fa-clipboard-list-check"></i>
																				Terms
									</a>
								</li>
							                		<li class="menu_item">
									<a href="/child-panel" class="menu_link" >
																					<i class="navbar-icon fab fa-slideshare"></i>
																				Child panel
									</a>
								</li>
							                		<li class="menu_item">
									<a href="/api" class="menu_link" >
																					<i class="navbar-icon fad fa-link"></i>
																				API
									</a>
								</li>
							                </ul>
        <!--<div class="bg_sidebars">
                <img src="https://storage.perfectcdn.com/o9v0gb/eityo0uj012nwri1.webp" alt=" Sidebar BG"> 
            </div>-->
      </div>
      <div id="content">
        <!-- Main Content Area -->
        <header id="header" class="nav-scrolled">
          <div class="header_left">
            <button class="sidebar_button" id="SidebarButton">
              <iconify-icon icon="ic:sharp-menu"></iconify-icon>
            </button>
            <div class="header_logo d-none-desk">
              <a href="/" class="sider_logo">
                <img src="{{ site['logo'] }}" class="img-fluid logo-white" alt="{{ site['site_name'] }} - ">
                <img src="{{ site['logo'] }}" class="img-fluid logo-color" alt="{{ site['site_name'] }} - ">
              </a>
            </div>
          </div>
          <div class="header_right d-none-ph d-none-tab">
           <!--  <a href="https://t.me/sajjimian" target="_blank" class="menu_btn telegram">
              <img src="https://i.postimg.cc/WbLM41mZ/3787425-telegram-logo-messanger-social-social-media-icon.png" alt="" /> 
            </a> -->
            <!-- <a href="" class="menu_btn">
              <img src="https://storage.perfectcdn.com/quqory/5fw79905u02lr7j4.png" alt="" />
            </a> -->

             <a href="javascript:void(0)" class="day_night_btn" onclick="toggleThemeMode()">
    <span class="night_mode">
        <iconify-icon icon="ph:moon-duotone"></iconify-icon>
    </span>
</a>
{% if site_currency_converter == "1" %}
<div class="btn-group currency_btn">
              <button type="button" class="btn btn-danger btn-sm dropdown-toggle currency_button" data-bs-toggle="dropdown" aria-expanded="false">
                               									<iconify-icon icon="material-symbols-light:currency-exchange" width="24" height="24"></iconify-icon>
									                            </button>
              <ul class="dropdown-menu dropdown-menu-end" id="currencies-list">
                	                                 {{ currencies_dropdown }}                       																			
            
             </ul>
            </div>
             {% else %}
	{% endif %}
                        <!-- Example single danger button -->
            <si><div class="btn-group user_menu_wrap">
              <button type="button" class="btn btn-danger btn-sm dropdown-toggle user_access_btn" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://static.vecteezy.com/system/resources/thumbnails/048/216/761/small/modern-male-avatar-with-black-hair-and-hoodie-illustration-free-png.png" class="img-fluid user_avatar avatar_images profilePicture" alt=" Avatar profile pic">
              </button>
              <ul class="dropdown-menu dropdown-menu-end pb-0 overflow-hidden">
                <li>
                  <a class="dropdown-item" href="/account">
                    <div class="icon">
                      <iconify-icon icon="ph:user-duotone"></iconify-icon>
                    </div>
                    <div class="text">My Account</div>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="/addfunds">
                    <div class="icon">
                      <iconify-icon icon="healthicons:money-bag"></iconify-icon>
                    </div>
                    <div class="text">Add Funds</div>
                  </a>
                </li>
              
                <li><hr class="dropdown-divider"></li>
                <li>
                  <a class="dropdown-item bg-danger" href="/logout">
                    <div class="icon">
                      <iconify-icon icon="uis:signout"></iconify-icon>
                    </div>
                    <div class="text">Logout</div>
                  </a>
                </li>
              </ul>
            </div>
              </si>
          </div>
          <div class="header_right d-none-desk">
          <a href="javascript:void(0)" class="day_night_btn" onclick="toggleThemeMode()">
    <span class="night_mode">
        <iconify-icon icon="ph:moon-duotone"></iconify-icon>
    </span>
</a>

              <!--<button
                type="button"
                class="btn btn-danger btn-sm dropdown-toggle user_access_btn"
                data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"
              >
                <img
                  src="https://storage.perfectcdn.com/quqory/iqallc0kre1w1cbe.png"
                  class="img-fluid user_avatar avatar_images profilePicture"
                  alt="profile pic"
                />
              </button>-->
            {% if site_currency_converter == "1" %}
                      <div class="btn-group currency_btn">
              <button type="button" class="btn btn-danger btn-sm dropdown-toggle currency_button" data-bs-toggle="dropdown" aria-expanded="false">
                               								<iconify-icon icon="material-symbols-light:currency-exchange" width="24" height="24"></iconify-icon>
									                            </button>
              <ul class="dropdown-menu dropdown-menu-end" id="currencies-list">
                	                                             {{ currencies_dropdown }}            
                                                       
                                                																							
            
             </ul>
            </div>
              {% else %}
	{% endif %}   
            
                                <!-- Example single danger button -->
            <si><div class="btn-group user_menu_wrap">
              <button type="button" class="btn btn-danger btn-sm dropdown-toggle user_access_btn" data-bs-toggle="dropdown" aria-expanded="false">
                <img src="https://static.vecteezy.com/system/resources/thumbnails/048/216/761/small/modern-male-avatar-with-black-hair-and-hoodie-illustration-free-png.png" class="img-fluid user_avatar avatar_images profilePicture" alt=" Avatar profile pic">
              </button>
              <ul class="dropdown-menu dropdown-menu-end pb-0 overflow-hidden" style="">
                <li>
                  <a class="dropdown-item" href="/account">
                    <div class="icon">
                      <iconify-icon icon="ph:user-duotone"></iconify-icon>
                    </div>
                    <div class="text">My Account</div>
                  </a>
                </li>
                <li>
                  <a class="dropdown-item" href="/addfunds">
                    <div class="icon">
                      <iconify-icon icon="healthicons:money-bag"></iconify-icon>
                    </div>
                    <div class="text">Add Funds</div>
                  </a>
                </li>
               
                <li><hr class="dropdown-divider"></li>
                <li>
                  <a class="dropdown-item bg-danger" href="/logout">
                    <div class="icon">
                      <iconify-icon icon="uis:signout"></iconify-icon>
                    </div>
                    <div class="text">Logout</div>
                  </a>
                </li>
              </ul>
            </div>
              </si>
          </div>
        </header>

        <!-- Sidebar Offcanvas -->
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
          <div class="offcanvas-header">
           
            <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
          </div>
          <div class="offcanvas-body">
           
            <div class="user_box">
              <div class="user_avatar">
                <img
                  src="https://storage.perfectcdn.com/quqory/iqallc0kre1w1cbe.png"
                  class="img-fluid avatar_images"
                  alt=""
                />
              </div>
              <h4>{{ user["username"]  }}</h4>
              <h6>Balance:{{ user["balance"] }}</h6>
            </div>

            <div class="user_sidebar mb-3">
              <a href="#" target="_blank" class="menu_btn telegram">
                <img src="https://smmxz.sacloud.site/dashboard/telegram-logo.png" alt="" />
              </a>
              <!-- <a href="" class="menu_btn">
                <img src="https://smmxz.sacloud.site/dashboard/bell-icon.png" alt="" />
              </a> -->
  
             
  
                            <!-- Example single danger button -->
            </div>
            
            <div class="user_sidebar_menu">
              <ul>
                <li>
                  <a class="sidebar-user-item" href="/account">
                    <div class="icon">
                      <iconify-icon icon="ph:user-duotone"></iconify-icon>
                    </div>
                    <div class="text">My Account</div>
                  </a>
                </li>
               
                <li>
                  <a class="sidebar-user-item" href="/addfunds">
                    <div class="icon">
                      <iconify-icon icon="healthicons:money-bag"></iconify-icon>
                    </div>
                    <div class="text">Add Funds</div>
                  </a>
                </li>
                <li>
                  <a class="sidebar-user-item" href="/dashboard">
                    <div class="icon">
                      <iconify-icon
                        icon="clarity:dashboard-solid-badged"
                      ></iconify-icon>
                    </div>
                    <div class="text">Dashboard</div>
                  </a>
                </li>
                <li>
                  <a class="sidebar-user-item" href="/logout">
                    <div class="icon">
                      <iconify-icon icon="uis:signout"></iconify-icon>
                    </div>
                    <div class="text">Logout</div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>





        
        
        
<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/ob5eq3/9kqdad0glwb7ykdp.js" >
                            </script>
                    <script type="text/javascript"  src="https://storage.perfectcdn.com/ob5eq3/t05xwla9gwo8usgw.js" >
                            </script>
                      
                      

                      
          <script>
            function updateMinMax() {
                let itemContent = document.querySelector('.min-max').innerHTML;
                $('#minMax').html(itemContent);
            }
            function updateService() {
                let itemContentName = $('#orderform-service option:selected').text();
                $('#new_services_name').html(itemContentName);
            }

            $(document).ready(function () {
                $("#orderform-service").change(function () {
                    setTimeout(updateMinMax, 100);
                    setTimeout(updateService, 100);
                });
                updateMinMax();
                updateService();
            });

        </script>          
    
{% else %}


<body class="noAuth" >
     <!-- Without Login Header -->
            <header class="fixed-top navbar-login">
                <nav class="navbar navbar-expand-lg">
                <div class="container">
                    <a class="navbar-brand" href="/">
                    <div class="logo_navbar">
                                                <img src="{{ site['logo'] }}" class="img-fluid" alt="{{ site['site_name'] }}" />
                                            </div>
                    </a>
                    <button
                    class="navbar-toggler"
                    type="button"
                    data-bs-toggle="offcanvas"
                    href="#offcanvasExample"
                    role="button"
                    aria-controls="offcanvasExample"
                    >
                    <span class="icon">
                        <iconify-icon icon="fe:bar"></iconify-icon>
                    </span>
                    <span class="text">Menu</span>
                    </button>
                    <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                                                                                <li class="nav-item" >
                                <a href="/" class="nav-link   active" >
                                                                        Home
                                </a>
                            </li>
                                                                                                            <li class="nav-item" >
                                <a href="/services" class="nav-link " >
                                                                        Services
                                </a>
                            </li>
                                                                                                         
                                                                                                            
                                                                                                            <li class="nav-item" >
                                <a href="/api" class="nav-link " >
                                                                        API
                                </a>
                            </li>
                                                                                                            <li class="nav-item" >
                                <a href="/faqs" class="nav-link " >
                                                                        FAQ
                                </a>
                            </li>
                                                                        </ul>
                    <div class="ms-auto nav_right">
                        <a href="/#login" class="btn nav_right_btn btn_white_outline"
                        >Sign In</a
                        >
                        <a href="/signup" class="btn nav_right_btn btn_signup"
                        >Sign Up</a
                        >
                    </div>
                    </div>
                </div>
                </nav>
            </header>
        
            <div
                class="offcanvas offcanvas-end mobile_menu_sidebar"
                tabindex="-1"
                id="offcanvasExample"
                aria-labelledby="offcanvasExampleLabel"
            >
                <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">
                    <a href="/">
                                                <img src="{{ site['logo'] }}" width="170px" class="img-fluid" alt="{{ site['site_name'] }}" />
                                            </a>
                </h5>
                <button
                    type="button"
                    class="btn-close"
                    data-bs-dismiss="offcanvas"
                    aria-label="Close"
                ></button>
                </div>
                <div class="offcanvas-body mobile_menu_body">
                <div class="mobile_nav_menu">
                    <ul class="navbar-nav mb-3">
                                                                        <li class="nav-item" >
                            <a href="/" class="nav-link   active" >
                                                                Home
                            </a>
                        </li>
                                                                                                    <li class="nav-item" >
                                <a href="/services" class="nav-link " >
                                                                        Services
                                </a>
                            </li>
                                                                                                        
                                                                                                       
                                                                                                        <li class="nav-item" >
                                <a href="/api" class="nav-link " >
                                                                        API
                                </a>
                            </li>
                                                                                                        <li class="nav-item" >
                                <a href="/faqs" class="nav-link " >
                                                                        FAQ
                                </a>
                            </li>
                                                                        </ul>
                </div>
                <div class="ms-auto nav_right">
                    <a href="/#login" class="btn nav_right_btn btn_white_outline"
                    >Sign In</a
                    >
                    <a href="/signup" class="btn nav_right_btn btn_signup"
                    >Sign Up</a
                    >
                </div>
                </div>
                <div class="offcanvas-footer">
                <div class="p-3 text-white text-center">Version 2.0.0</div>
                </div>
            </div>
        
            <!-- #### Without Login Header -->
			

{% endif %}
