<!DOCTYPE html>
{% for lang in site['languages'] %}
{% if lang['active'] %}
<html lang="{{ lang['code'] }}">
{% endif %}
{% endfor %}
<head>
  <base href="{{ site['url'] }}">
  <title>{% if pagetitle %}  {{ pagetitle }}  {% else %} {{ title }} {% endif %} </title>
  <meta property="og:title" content="{% if pagetitle %}  {{ pagetitle }}  {% else %} {{ title }} {% endif %}" />
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <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 %}


 <script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/dist/tabler-icons.min.css"/>
<link rel="stylesheet" href="https://res.cloudinary.com/ducwr0k65/raw/upload/v1732772038/slick_ezvq4h.css"/>
<link rel="stylesheet" href="https://res.cloudinary.com/ducwr0k65/raw/upload/v1732772063/slick-theme_gdgbir.css"/>
<link rel="apple-touch-icon" href="https://res.cloudinary.com/rentalpanel/image/upload/v1708953759/sgxtwxhx5gi8l99dzyeu.png" />
<link rel="stylesheet" href="https://res.cloudinary.com/ducwr0k65/raw/upload/v1732771634/6leizq6kr3qjf9er_ai3jrg.css">
<link rel="stylesheet" href="https://res.cloudinary.com/ducwr0k65/raw/upload/v1732771773/ouz75xjynejw7gyo_c5zu19.css">
<link rel="stylesheet" href="https://res.cloudinary.com/ducwr0k65/raw/upload/v1732771799/bootstrap-datetimepicker.min_nswomw.css">
<link rel="stylesheet" href="https://res.cloudinary.com/ducwr0k65/raw/upload/v1732771830/all.min_inojqb.css">
<link rel="stylesheet" href="https://res.cloudinary.com/ducwr0k65/raw/upload/v1732771854/cuw6iix855efzrw3_efbsoq.css">
<link rel="stylesheet" href="https://res.cloudinary.com/ducwr0k65/raw/upload/v1732771884/ny6mhzbbh07u28pq_k7kind.css">
<link rel="dns-prefetch" href="//cdn.1panel.link">
<link rel="stylesheet" href="https://cdn.1panel.link/main/css/global.main.v24.18.11.v2.css" media="print" onload="this.media='all'" />
<link rel="stylesheet" href="https://cdn.1panel.link/main/fa5151/css/all.min.css" media="print" onload="this.media='all'" />
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"/>


{{ headerCode }}
  </head>
{% if user['auth'] %}
<!-- Menu for Logged-in User -->
<body id="index" class="index authorized">
     <body id="indexgh" class="[panel.page classhh]h userauth">
<div class="sidebar sideclosd">
      <div class="fundcardsb" onclick="location.href = '/addfunds';">
        <p>
          Wallet Balance
        </p>
        <h3>
         {{ user["balance"]}}
        </h3>
      </div>
      <div class="wrkbtngrp">
        <a class="currenbtn threedblue" data-toggle="modal" data-target="#curncyModal">Currency</a>
        <a class="langbtn threeddarkblue" data-toggle="modal" data-target="#langModal"><i class="fab fa-google"></i> Translation</a>


      </div>
      <p class="menuheading">
        Menu :
      </p>
      <ul class="sidebarul">
                    {% for menu in menus %}
                        <li class="nav-item">
                            <a class="nav-link {% if active_menu == menu['active'] %}active{% endif %}" href="{{ menu['slug'] }}">
                                <i class="navbar-icon threedblue {{ menu['icon'] }}"></i> {{ menu['name'] }}
                                {% if menu['slug'] == '/tickets' and ticketCount %}
                                    <span class="badge badge-warning">{{ ticketCount }}</span>
                                {% endif %}
                            </a>
                        </li>
                    {% endfor %}
                </ul>
      <div class="profilecard">
        <div class="profiletop">
          <img class="profilePicture"  src="https://boostbayan.com/app/views/SMM-Lead/img/icon.png">
          <div class="profileflecard">
            <p>
              Good Day 🤝
            </p>
            <h3>
              {{ user["username"] }}
            </h3>
          </div>
        </div>
        <div class="sbbtmicn">
          <a href="/" class="threedblue" target="_blank"><i class="fab fa-instagram"></i></a>
          <a href="https://www.youtube.com/@HostlyPhilippinesPvtLimited" class="threedblue" target="_blank"><i class="fab fa-youtube"></i></a>
          <a href="https://wa.me/639205648851" class="threedblue" target="_blank"><i class="fab fa-whatsapp"></i></a>
          <a class="lightbulb threedblue" href="javascript:void(0)" onclick="themeToggle()" id="toggleMode"><i class="fad fa-lightbulb"></i></a>
          <a href="/logout" class="threedblue"><i class="fas fa-power-off"></i></a>
        </div>
      </div>
    </div>
    
    <script>
      // Function to toggle the theme
      function themeToggle() {
        document.body.classList.toggle('darkmode');

        // Save the current theme to localStorage
        if (document.body.classList.contains('darkmode')) {
          localStorage.setItem('theme', 'dark');
        } else {
          localStorage.setItem('theme', 'light');
        }
      }

      // Function to load the theme from localStorage
      function loadTheme() {
        const theme = localStorage.getItem('theme');
        if (theme === 'dark') {
          document.body.classList.add('darkmode');
        }
      }

      // Load the theme when the page is loaded
      document.addEventListener('DOMContentLoaded', loadTheme);
    </script>

    <!-- 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" fdprocessedid="hvian">
              <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="fundcontent 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">

            <div class="dropdown funddd">
  <button class="form-control dropdown-toggle" type="button" data-toggle="dropdown">
    Change Currency
    <span class="caret"></span>
  </button>

  <ul class="dropdown-menu balance-dropdown__container" id="currencies-list">
    <!-- Currency options -->
<li class="nav-item">
    <span class="currency-name-span">
    {{ currencies_dropdown }}
    </span></li>
  </ul>
</div>

          </div>
        </div>
      </div>
    </div>
    <div class="main-content sideclosdmain">
            <div class="headernav threedblue navbar-fixed-top">
        <a class="navbar-brand" href="/">
                     <img style="max-width:205px;" src="{{ site['logo'] }}" alt="{{ site["site_name"] }}" title="{{ site["site_name"] }}">               </a>

        <div class="dropdown profiledd">
          <div class="breadcrumbhead">
           Always make yourself a 
            </p>
                        <a href="#">Priority</a>
                      </div>
          <a href="#" class="dropdown-toggle threeddarkblue" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
            <img class="profilePicture" src="https://boostbayan.com/app/views/SMM-Lead/img/icon.png" alt="Profile Picture">
          </a>
          <ul class="dropdown-menu">
            <li><a href="/account">Settings</a></li>
            <li><a href="/logout">Logout</a></li>
          </ul>
          <div class="hamburget" onclick="openSidebar()">
            <div class="icon icon1"></div>
            <div class="icon icon2"></div>
            <div class="icon icon3"></div>
          </div>
        </div>
      </div>
{% else %}
<!-- Menu for Not Logged-in User -->
<body id="login" class="login unauthorized">
    <!--<body id="login" class="[panel.page class]">--> <nav class="navbar navbar-default navbar-fixed-top guestnav ">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle threedblue 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 style="max-width:205px;" 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">
      {% for menu in menus %} <li class=" menu_items">
<a class="component-navbar-nav-link  component-navbar-nav-link__navbar-private 
{% if active_menu == menu["active"] %} component-navbar-nav-link-active__navbar-private  {% endif %} "     href=" {{menu["slug"]}}" >
      <span class="component-navbar-nav-link-icon">
     <span class="navbar-icon threedblue {{menu["icon"]}}"></span>
   </span>
 {{menu["name"]}}
            </a>
           </li>{% endfor %} 
							   

 </ul>
														  

</nav>
     </div>
      </div> 
</div>
</div>  
</div>





{% endif %}






<style>

:root {
      --tp-color-red: #de3f3f;
      --tp-color-blue: #326cec;
      --tp-color-purple: #781adc;
      --tp-color-green2: #169b47;
      --tp-color-yellow: #bc8c27;
      --tp-color-gold: #FFD700;
      --tp-color-blue: #326cec !important;

    }
      span.refill.btns button {
      background-color: #169b47 !important;
      color: #fff;
      padding: 4px 8px;
      border-radius: 7px;
      margin-right: 5px;
      color: white;
      font-weight: 600;
      font-size: 11px;
      margin-top: 4px;
      border: none !important;
    }

    .servicespeed .tag.Hot {
      background-color: #FFD700 !important;
      color: #fff;
      padding: 4px 8px;
      border-radius: 7px;
      margin-right: 5px;
      color: white;
      font-weight: 600;
      font-size: 11px;
      margin-top: 4px;
      /* border: none !important; */
      text-transform: capitalize;
    }

    .servicebox .servicebottom {
      margin: 10px 0px;
    }

    .servicespeed .tag.favourite.service {
      background-color: #326cec !important;
      color: #fff;
      padding: 4px 8px;
      border-radius: 7px;
      margin-right: 5px;
      color: white;
      font-weight: 600;
      font-size: 11px;
      margin-top: 4px;
      /* border: none !important; */
      text-transform: capitalize;
    }

    .servicespeed span {
      background: var(--color-2);
      padding: 4px 8px;
      border-radius: 7px;
      margin-right: 5px;
      color: white;
      font-weight: 600;
      font-size: 11px;
      margin-top: 4px;
    }

    .srcsp span {
      font-weight: 700;
      color: #bfd5fd;
    }

    .select2-container .select2-dropdown .select2-results ul .select2-results__option--highlighted[aria-selected] {
      padding: 0px !important;
    }

    .select2-results__option[aria-selected] {
      padding: 0px !important;
    }

    @media only screen and (min-width: 962px) {
      .serviceslist {
        max-height: 276px;
        border-radius: 0 0 16px 13px;
        overflow-x: auto;
      }
    }

    .servicebox {
      border: 1px solid transparent;
    }
    .form-group.OrderService{
      margin-bottom:0px;
    }
    #select2-OrderService-container .servicebottom {
      display: none;
    }
    /* #select2-OrderService-container .servicebox.sclr635 .servicespeed .Most.seller{
      border: 1px solid #000;
    }
    #select2-OrderService-container .servicebox.sclr635 .servicespeed .Best.seller{
      border: 1px solid #000;
    }
     
    #select2-OrderService-container .servicebox.sclr635 .servicespeed .Hot{
      border: 1px solid #000;
    }
    #select2-OrderService-container .servicebox.sclr635 .servicespeed .Recommended {
      border: 1px solid #000;
    } */
    /* #select2-OrderService-container .servicebox.sclr635 .servicespeed .refill button{
      border: 1px solid #000;
    }
     */
     
    #select2-OrderService-container .servicebottom {

    position: absolute;
    top: 35px;
    z-index: 5;
   
    left: 0;
}
#select2-OrderService-container  span.refill.btns button{
  padding: 0px 8px;
}
    #select2-OrderService-container  .servicebox.sclr635 {
      display: flex;
    flex-direction: column;
   
    align-items: flex-start;
    }

    #select2-OrderService-container .servicedetail {
      display: none;
    }
.add_tags_services .servicebox{
  background-color: transparent !important;
}
.add_tags_services .servicebox .servicebottom{
margin: 0px !important;
}
    .dark .servicebox {
      background-color: #222;
      padding: 7px;
      color: var(--color-3);
      border-radius: 0;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      align-items: center;
    }

    .light .servicebox {
      background-color: transparent;
      padding: 7px;
      color: var(--color-3);
      border-radius: 0;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      align-items: center;
    }

    .servicebox {
      background-color: transparent;
      padding: 7px;
      color: var(--color-3);
      border-radius: 0;
      flex-direction: row;
      justify-content: space-between;
      width: 100%;
      align-items: center;
    }

    .light .srcsp span {
      color: #222;
    }

    @media only screen and (min-width: 962px) {
      .servicetop {
        padding-left: 2px;
        display: flex;
        justify-content: space-between;
        flex-direction: column;
      }
    }

    .sertops {
      display: flex;
      justify-content: space-between;
      font-size: 14px;
    }

    .servicedetail {
      display: flex;
      margin-top: 20px;
    }

    @media only screen and (min-width: 962px) {
      .srcsp {
        font-size: 12px;
        color: var(--color-3);
        margin-right: 15px;
        font-weight: 400;
      }
    }

    .active_lay {
      display: none;
    }

    span.select2-search.select2-search--dropdown {
      display: none;
    }

.add_funds.authorized form  .bootstrap-select .dropdown-menu li a span.text img{
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
}
.add_funds.authorized form .bootstrap-select .dropdown-toggle .filter-option-inner-inner img{
  width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
}
.select2-container--open .select2-dropdown--below{
 
    border: 1px solid rgba(0, 0, 0, 0.15) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175) !important;
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
    color: #fff !important;
    outline: none !important;
    background: radial-gradient(42.73% 42.73% at 50% 96.36%, #FF6464 0%, #FF5A5A10 100%), #f53e31 !important;
    background: #f53e31;
    /* box-shadow: #033c7350 0px 20px 30px; */
    box-shadow: 0px 1.18245px 2.3649px 0px #FF6464, 0px 0px 0px 1.18245px #f53e31 !important;
}
.select2-container--default .select2-results__option--selected{
    border-bottom:1px solid rgb(86 9 11) !important;
    background-color: #fff;
}
.select2-container--default .select2-selection--single{
    padding: 10px 0px;
          border-radius: 10px ;
          border: 1px solid #00000010 !important;
          outline: none !important;
          box-shadow: none !important;
          background: #efefef;
          color: #0a0a0a;
          height: 45px;
}
span.select2-dropdown.select2-dropdown--above{
    min-height: 340px !important;
    padding: 0px !important;
    margin-top: 0px !important;
    -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    background-color: #fff;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height: 12px !important;
}
.select2-container .select2-selection--single .select2-selection__rendered{
    padding-left: 0px !important;
}
      .add_funds.authorized form .btn-default {
          padding: 10px;
          border-radius: 10px;
          border: 1px solid #00000010 !important;
          outline: none !important;
          box-shadow: none !important;
          background: #efefef;
          color: #0a0a0a;
          height: 45px;
      }
      .authorized form .bootstrap-select .dropdown-menu {
              border-radius: 10px !important;
              top: 10px !important;
              max-height: 340px !important;
              min-height: 35px !important;
              left: 0;
              float: left;
              text-align: left;
              list-style: none;
              background-clip: padding-box !important;
          }

          .authorized form .dropdown-menu.open li.active a, .authorized form .dropdown-menu > li > a:hover, .authorized form .dropdown-menu > li > a:focus {

          color: #fff !important;
          outline: none !important;
          background: radial-gradient(42.73% 42.73% at 50% 96.36%, #FF6464 0%, #FF5A5A10 100%), #f53e31 !important;
          background: #f53e31;
          /* box-shadow: #033c7350 0px 20px 30px; */
          box-shadow: 0px 1.18245px 2.3649px 0px #FF6464, 0px 0px 0px 1.18245px #f53e31 !important;
      }
          .add_funds.authorized .dropdown.bootstrap-select.form-control.bs3.open{
              background-color: transparent !important;
          }
      .add_funds.authorized form .btn-default:is(:hover,:focus){
          padding: 10px;
          border-radius: 10px;
          border: 1px solid #00000010 !important;
          outline: none !important;
          box-shadow: none !important;
          background: #efefef;
          color: #0a0a0a;
          height: 45px;
      }
      .add_funds.authorized form .btn-default:focus {
          border: 1px solid #66afe9 !important;
          outline: 0 !important;
          -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, 0.6) !important;
          /* box-shadow: 0 0 10px #5897fb90 !important; */
          /* border: 1px solid #5897fb90 !important; */
      }
      @media (min-width: 1200px) {
          .authorized.add_funds  form .bootstrap-select .dropdown-menu {
              min-height: 340px !important;
          }
      }

      @media (min-width: 992px) {
          .authorized.add_funds  form  .bootstrap-select .dropdown-menu {
              min-height: 340px !important;
          }
      }
      @media (min-width: 767px) {
          .authorized.add_funds  form  .bootstrap-select .dropdown-menu {
              min-height: 340px !important;
          }
      }
      @media (min-width: 592px) {
          .authorized.add_funds  form  .bootstrap-select .dropdown-menu {
              min-height: 340px !important;
          }
      }
      .authorized.add_funds  form  .bootstrap-select .dropdown-menu {
          min-height: 340px !important;
      }
      .add_funds.authorized form .dropdown-menu.open {
          max-width: 100%;
          position: inherit;
      }
      .authorized.add_funds  form .bootstrap-select .dropdown-menu.open li {
          border-bottom: 1px solid #00000010 !important;
      }
      .authorized.add_funds  form  .dropdown-menu.open li a {
          /* margin: 5px 0px !important; */
      }

      .authorized.add_funds  form .dropdown-menu.open li a {
          display: block;
          width: 100%;
          /* border: 1px solid rgb(86 9 11); */
          padding: 8px 10px;
          color: #333;
          /* border-radius: 30px; */
          /* margin: 15px 0px; */
          outline: none !important;
      }
      .bootstrap-select .dropdown-menu li a span.text {
          word-wrap: break-word;
          white-space: break-spaces;
      }
              .pagination li a {
              background: radial-gradient(42.73% 42.73% at 50% 96.36%, #FF6464 0%, #FF5A5A10 100%), #f53e31 !important;
              background: #f53e31;
              /*box-shadow: #033c7350 0px 20px 30px;*/
              box-shadow: 0px 1.18245px 2.3649px 0px #FF6464, 0px 0px 0px 1.18245px #f53e31, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
              }
              .welcomebox h2 span, .sidebarul li a:hover, .sidebarul li a:focus, .maindetheadstat h4, .ticketboxleft a, .contpghdr h2 span, .pricechildpanel, .ullistns li i, .fcpcont h3, .servid, .stepcardmoflex h3, .stepcont h2  {
             color: #f53e31 !important;
              }
              .secondSec .secheading h2 span {
              color: #162b51 !important;
              }
              .note {
              border-color: #f53e31 !important;
              }
              body a.active {
              color: #fff !important;
              }
              .sidebarul li a, .idtd div {
              color: #162b51 !important;
              }
              .idtd div {
              border: 1px solid #162b51 !important;
              }
            	.menu_items_17, .menu_items_21 {
              display:none !important;
              }
              body {
              background-image: none !important;
              background-color: #F0F4F7 !important;
              }
              body.darkmode ul li a {
              color: #fffff !important;
              }
              body.darkmode {
              background: radial-gradient(#0a0a0a, #1a1a1a) !important;
              }
              body.darkmode .statcard {
        background: #242b3a;
        border: 1px solid #ffffff10;
        box-shadow: 2px 2px 120px -55px #2fa4e730;
      }
      body.darkmode .statcard .dethead .maindetheadstat p {
        color: #fff;
      }
      body.darkmode .statcard .dethead .maindetheadstat h4 {
        color: #ffffff99;
      }
      body.darkmode .well {
        background: #242b3a;
        border: 1px solid #ffffff10;
        color: #fff;
        box-shadow: 2px 2px 120px -55px #2fa4e730;
      }
              body.darkmode ul.nav.nav-pills {
        background: #242b3a;
        border: 1px solid #ffffff10;
        color: #fff;
        box-shadow: 2px 2px 120px -55px #2fa4e730;
      }

              body.darkmode .sidebar {
        background: #242b3a;
        border: 1px solid #ffffff20;
        box-shadow: 2px 2px 120px -55px #2fa4e730;
      }
      body.darkmode .sidebar ul li a {
        color: #fff !important;
        font-weight: 400;
      }
      body.darkmode p.menuheading, body.darkmode .gridcol2 div#specs, body.darkmode .wellhdr .headrwell p, body.darkmode footer p.footerp {
        color: #fff;
      }
      body.darkmode .profilecard {
        background: #ffffff20;
        color: #fff;
      }
      body.darkmode .profilecard img {
        border-color: #454647;
        margin-right: 10px;
      }
      body.darkmode .profilecard h3 {
        color: #ffffff99;
        text-align: left;
        font-weight: bold;
      }
      body.darkmode .form-control, body.darkmode .statsdesc > div, body.darkmode div.gridcol2, body.darkmode .panel-body {
        background: #ffffff20;
        border: 1px solid #ffffff10;
        color: #fff;
      }
      body.darkmode footer {
        background: #ffffff20;
        color: #fff;
      }
      body.darkmode .payment-group button {
        color: #fff;
        border-radius: 12px;
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
      body.darkmode h4.paymentHeading {
        color: #fff;
        font-weight: 400;
      }
      body.darkmode h4.paymentHeading i {
        background: #2fa4e7;
      }
      body.darkmode ul.paymethradios li.payment-option a {
        background: #ffffff50;
        color: #fff;
      }
      body.darkmode ul.paymethradios li.payment-option a .option-header p, body.userauth.darkmode td.idtd {
        color: #fff;
      }
      body.darkmode ul.paymethradios li.payment-option a .option-header span.radio {
        border-color: #2fa4e7;
      }
      body.darkmode .ordertopfeats {
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
      body.darkmode .search .form-control {
        background: transparent;
        border: 0;
        border-bottom: 1px solid #ffffff20;
      }
              body.darkmode .table-responsive {
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
        color: #fff;
      }
      body.darkmode .wellhdr .headrwell i {
        background: #2fa4e7;
      }
      body.darkmode .chat-container, body.darkmode .notechatdet {
        color: #fff;
        border-radius: 12px;
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
      body.darkmode .datetick {
        background: #ffffff20;
      }
      body.darkmode .whatsapp-chat-box {
        background: #373737;
      }
      body.darkmode .chatdetstat {
        color: #fff;
        border-radius: 12px;
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
      body.darkmode .chatdetstat p{
        color: #ffffff90;
      }
              body.darkmode ul.nsul {
        color: #fff;
        border-radius: 12px;
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
      body.darkmode ul.nsul li {
        background: transparent;
        color: #fff;
      }
      body.darkmode ul.ullistns li {
        color: #ffffff90;
      }
      body.darkmode .cardfcp {
        color: #fff;
        border-radius: 12px;
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
      body.darkmode .secheading h2 {
        color: #fff;
      }
      body.darkmode .secheading h2 span {
        color: #2fa4e7;
      }
      body.darkmode hr {
        border-color: #ffffff10;
      }
      body.darkmode .backchildsmh {
        background: #4d4d4f;
      }
      body.userauth.darkmode .backchildsmh h3.pricechildpanel small {
        color: #fff;
      }
      body.darkmode .backchildsmh h3.pricechildpanel {
        background: #4d4d4f;
      }
      body.darkmode .modal-content {
        color: #fff;
        border-radius: 12px;
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
      body.darkmode .modal-header {
        border-color: #ffffff20;
      }
      body.darkmode .dropdown-menu {
        background: #292929;
      }
      body.darkmode .dropdown-menu li a {
        color: #fff !important;
        border: 1px solid #ffffff10 !important;
      }
      body.darkmode .profilecardacc {
        color: #fff;
        border-radius: 12px;
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
      body.darkmode p.usernameprof {
        color: #fff;
      }
      body.darkmode .dropdown.profiledd ul.dropdown-menu{
        color: #fff !important;
        border-radius: 12px;
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
      body.darkmode .form-msord small {
        color: #178acc;
      }
      body.darkmode .stepcardmo{
        color: #fff;
        border-radius: 12px;
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
      body.darkmode .page-header-lgin {
        color: #fff;
        border-radius: 12px;
        box-shadow: rgba(255, 255, 255, 0.2) 0 1px 1px 0 inset, 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06), rgba(0, 0, 0, 0.9) 0px 0px 0px 1px !important;
        background: linear-gradient(180deg, #404146 0%, #272729 100%) !important;
        border: none !important;
      }
              .well .btn-default:active .caret,
      .well .btn-default.active .caret,
      .well .open > .dropdown-toggle.btn-default .caret {
      transform: rotate(180deg) !important;
      }
              thead tr{
              background: none !important;
              background-image: none !important;
              }
              body .btn.btn-primary, body .threedblue, thead, .maindetheadstat i, .headrwell i, .help-block.min-max, .funddd .dropdown-menu li a span, .tickstat, .seventhSec .stepcard{
              background: radial-gradient(42.73% 42.73% at 50% 96.36%, #64b0ff 0%, #FF5A5A10 100%), #3191f5 !important;
              background: #2780e3;
              /*box-shadow: #033c7350 0px 20px 30px;*/
              box-shadow: 0px 1.18245px 2.3649px 0px #6484ff, 0px 0px 0px 1.18245px #178acc, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
              }
              body .nav-pills > li.active > a, body .nav-pills > li.active > a:hover, body .nav-pills > li.active > a:focus {
              background: radial-gradient(42.73% 42.73% at 50% 96.36%, #FF6464 0%, #FF5A5A10 100%), #f53e31 !important;
              background: #f53e31;
              /*box-shadow: #033c7350 0px 20px 30px;*/
              box-shadow: 0px 1.18245px 2.3649px 0px #FF6464, 0px 0px 0px 1.18245px #f53e31, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
              color: #ffffff !important;
              }
              body .nav-pills > li:first-child.active > a, body .nav-pills.activechngpill > li:first-child.active > a {
              background: radial-gradient(42.73% 42.73% at 50% 96.36%, #FF6464 0%, #FF5A5A10 100%), #f53e31 !important;
              background: #f53e31;
              /*box-shadow: #033c7350 0px 20px 30px;*/
              box-shadow: 0px 1.18245px 2.3649px 0px #FF6464, 0px 0px 0px 1.18245px #f53e31, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
              color: #ffffff !important;
              }
              /* body .threeddarkblue {
              background: radial-gradient(42.73% 42.73% at 50% 96.36%, #CA6464 0%, #D46E6E10 100%), #841E1E !important;
              background: #841E1E;
              /*box-shadow: #033c7350 0px 20px 30px;*/
              box-shadow: 0px 1.18245px 2.3649px 0px #F28C8C, 0px 0px 0px 1.18245px #841E1E, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
              }*/
    </style>
<style>
		#helpsquestion {
    position: fixed;
    top: 40%;
    right: -39px;
    z-index: 99;
    font-size: 12px;
    border: none;
    outline: none;
    background-color: #EE4540;
    color: white;
    cursor: pointer;
    padding: 15px;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    transition: right 1s;
    animation: blinkingBackground 2s infinite;
}

#helpsquestion:hover {
  right: -1px;
}

@keyframes blinkingBackground{
		0%		{ background-color: #847bec;}
		25%		{ background-color: #847bec;}
		50%		{ background-color: #FF0000;}
		75%		{ background-color: #FF0000;}
		100%	        { background-color: #007bff;}
	}
		</style>
<style>
  body {
  overflow-x: hidden !important;
  }
  .slick-prev,
.slick-next
{
  margin: 20px !important;
  }
   .list-inline.ftrlinks li a, .boxinvsec h2 span, .stepcont h2, .secheading h2 span{
  color: #f53e31 !important;
  }
  .subtop, .btn.btn-secondary, .tagssetdown .tags.tagstiltcentro, .tagssetdown .tags.primback, .gridcol, .bspcard a, .clientelelgs p, .stepcard, .subhead, .boxinvsec .btn.btn-primary, .faqcardheader i, .socialulftr.list-inline li a, .featurelists .featname i {
  border: 0px !important;
  outline: none !important;
  color: #fff !important;
  background: radial-gradient(42.73% 42.73% at 50% 96.36%, #FF6464 0%, #FF5A5A10 100%), #f53e31 !important;
        background: #f53e31;
        /*box-shadow: #033c7350 0px 20px 30px;*/
        box-shadow: 0px 1.18245px 2.3649px 0px #FF6464, 0px 0px 0px 1.18245px #f53e31, rgba(0, 0, 0, 0.09) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px !important;
        }
  @media(max-width: 992px){
  body .main-content {
  padding-top: 0px !important;
  margin-top: 40px !important;
  }
  }
</style>
<style>
      .swiper-container {
        width: 100%;
        height: 100%;
      }
      .swiper-slide {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        flex-direction: column;
        font-size: 18px;
      }
      .modal-content {
        text-align: center;
      }
      .btn-next,
      .btn-close {
        margin-top: 20px;
      }
    </style>
<style>
.particle-snow{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1;pointer-events:none}.particle-snow canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none}.christmas-garland{text-align:center;white-space:nowrap;overflow:hidden;position:absolute;z-index:1;padding:0;pointer-events:none;width:100%;height:85px}.christmas-garland .christmas-garland__item{position:relative;width:28px;height:28px;border-radius:50%;display:inline-block;margin-left:20px}.christmas-garland .christmas-garland__item .shape{-webkit-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-name:flash-1;animation-name:flash-1;-webkit-animation-duration:2s;animation-duration:2s}.christmas-garland .christmas-garland__item .apple{width:22px;height:22px;border-radius:50%;margin-left:auto;margin-right:auto;margin-top:8px}.christmas-garland .christmas-garland__item .pear{width:12px;height:28px;border-radius:50%;margin-left:auto;margin-right:auto;margin-top:6px}.christmas-garland .christmas-garland__item:nth-child(2n+1) .shape{-webkit-animation-name:flash-2;animation-name:flash-2;-webkit-animation-duration:.4s;animation-duration:.4s}.christmas-garland .christmas-garland__item:nth-child(4n+2) .shape{-webkit-animation-name:flash-3;animation-name:flash-3;-webkit-animation-duration:1.1s;animation-duration:1.1s}.christmas-garland .christmas-garland__item:nth-child(odd) .shape{-webkit-animation-duration:1.8s;animation-duration:1.8s}.christmas-garland .christmas-garland__item:nth-child(3n+1) .shape{-webkit-animation-duration:1.4s;animation-duration:1.4s}.christmas-garland .christmas-garland__item:before{content:"";position:absolute;background:#222;width:10px;height:10px;border-radius:3px;top:-1px;left:9px}.christmas-garland .christmas-garland__item:after{content:"";top:-9px;left:14px;position:absolute;width:52px;height:18px;border-bottom:solid #222 2px;border-radius:50%}.christmas-garland .christmas-garland__item:last-child:after{content:none}.christmas-garland .christmas-garland__item:first-child{margin-left:-40px}</style>


<script>
      function openSidebar() {
        $(".sidebar").toggleClass("sideOpened");
        $(".hamburget").toggleClass("tog");
        $(".sidebaroverlay").toggleClass("active");
      }
    </script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.1panel.link/toolkit.js" defer></script>
<style>
  /* Default: no padding */
  .top-padding {
    display: none;
  }

  /* Apply padding only for compact devices (e.g., mobile) */
  @media (max-width: 800px) {
    .top-padding {
      display: block;
      padding-top: 35px; /* You can adjust the padding value */
    }
  }
</style>

<div class="top-padding"></div>





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





