{% include 'header.twig' %}
<div style="padding-top:150px"></div>

<section class="signupSec">
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <div class="signupform">
          <span class="subheading">Start For Free</span>
          <h1>
            Create new account<span>.</span>
          </h1>
          <span class="signuptext">Already a Member? <a href="/">Sign in</a></span>
          
          {% if errorText %}
        <div class="alert alert-dismissible alert-danger">
          {{ errorText }}
        </div>
        {% endif %}
        {% if successText %}
        <div class="alert alert-dismissible alert-success">
          {{ successText }}
          </div>
          {% endif %}
          <form action="" method="post" class="component_form_group component_checkbox">
            <input type="hidden" name="_csrf" value="Yj_8QIpfc0cxr3rOBancvz6peklNug8C-Sihl26oDZoIVb41vDdeN0H_OIlpmevgU90AOGDjY0GraZLAVpA91g==">

            
                <div class="form-group">
                    <input type="text" class="form-control" name="username" value="">
                    <label for="username" class="control-label">Username</label>
                </div>
                <div class="form-group">
                    <input type="text" class="form-control" id="firstname" name="name" value="{{ data['name'] }}">
                    <label for="name" class="control-label">Your Name</label>
                </div>        
                <div class="form-group">
                    <input type="text" class="form-control" name="email" value="">
                    <label for="email" class="control-label">Email</label>
                </div>   
                <div class="form-group">
                    <input type="password" class="form-control" name="password">
                    <label for="password" class="control-label">Password</label>
                </div>
                <div class="form-group">
                    <input type="password" class="form-control" name="password_again">
                    <label for="password_again" class="control-label">Confirm Password</label>
                </div>
                <div class="checkbox">
                    <label>
                        <input type="checkbox" name="terms" value="1">
                        I have read and agreed with <a href='terms'> Terms of Service </a>
                    </label>
                </div>
                {% if captcha %}
                <div class="form-group">
                    <div class="g-recaptcha" data-sitekey="{{ captchaKey }}"></div>
                </div>
                {% endif %}
                <button type="submit" class="btn btn-primary click"><b>Create Account</b></button>
           </form>
        </div>
      </div>
    </div>
  </div>
</section>
<section class="seventhSec">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="secheading">
          <h2>
            How to Register on <span>{{ site["site_name"] }}</span>
          </h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <div class="stepcard" data-aos="fade-up" data-aos-delay="200">
          <div class="stepcont">
            <h2>
              Register
            </h2>
            <p>
              Fill out the registration form with all your details and create a strong password that you could remember.
            </p>
          </div>
          <span class="stepno">01 <small>Step</small></span>
        </div>
      </div>
      <div class="col-md-4">
        <div class="stepcard" data-aos="fade-up" data-aos-delay="400">
          <div class="stepcont">
            <h2>
              Verify Email
            </h2>
            <p>
              Check your inbox for a verification email and click the provided link to verify your account with {{ site["site_name"] }}.
            </p>
          </div>
          <span class="stepno">02 <small>Step</small></span>
        </div>
      </div>
      <div class="col-md-4">
        <div class="stepcard" data-aos="fade-up" data-aos-delay="600">
          <div class="stepcont">
            <h2>
              Enjoy Ordering
            </h2>
            <p>
              You could start your ordering journey as you will be redirected to the ordering page to start using the services.
            </p>
          </div>
          <span class="stepno">03 <small>Step</small></span>
        </div>
      </div>
    </div>
  </div>
</section>

<section class="seventhSec">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <div class="secheading">
          <h2>
            Tutorials for <span>{{ site["site_name"] }}</span>
          </h2>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <iframe class="ytiframetut" width="100%" height="100%" src="https://www.youtube-nocookie.com/embed/xxxxxx?si=0Un354YsnBk1TX5Q&amp;controls=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
      </div>
      <div class="col-md-4">
      </div>
      <div class="col-md-4">
      </div>
    </div>
  </div>
</section>


            
          </div>

    <!-- Modal -->
    <div
      id="dripfeedModal"
      class="modal fade"
      tabindex="-1"
      role="dialog"
      aria-labelledby="dripfeedModallabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="onboardingModalLabel">
              How do I turn on drip feed?
            </h4>
          </div>
          <div class="modal-body">
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div>Slide 1 Content</div>
                  <button class="btn btn-primary btn-next">Okay, next</button>
                </div>
                <div class="swiper-slide">
                  <div>Slide 2 Content</div>
                  <button class="btn btn-primary btn-next">Okay, next</button>
                </div>
                <div class="swiper-slide">
                  <div>Slide 3 Content</div>
                  <button class="btn btn-primary btn-next">Okay, next</button>
                </div>
                <div class="swiper-slide">
                  <div>Slide 4 Content</div>
                  <button class="btn btn-success btn-close">Close</button>
                </div>
              </div>
              <!-- Add Pagination -->
              <div class="swiper-pagination"></div>
            </div>
            <a href="#" class="btn btn-link">What is Drip Feed?</a>
          </div>
        </div>
      </div>
    </div>

    <!-- Subscription Modal -->
    <div
      id="subscriptionModal"
      class="modal modalfaqs fade"
      tabindex="-1"
      role="dialog"
      aria-labelledby="subscriptionModallabel"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
            >
              <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="subscriptionModalLabel">
              How do I subscribe?
            </h4>
          </div>
          <div class="modal-body">
            <div class="swiper-container-subscription">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <div>
                    <div class="steps">
                      <span class="numstep">1</span>
                      <div>
                        <h2>Step 1</h2>
                        <p>Choose the service according to your daily needs.</p>
                      </div>
                    </div>
                    <div class="steps">
                      <span class="numstep">2</span>
                      <div>
                        <h2>Step 2</h2>
                        <p>
                          Put your Social Media Profile Link ( Note : It must be
                          Public else we cannot fetch the new post links )
                        </p>
                      </div>
                    </div>
                  </div>
                  <button class="btn btn-nxt btn-next-subscription">
                    Okay, next
                  </button>
                </div>
                <div class="swiper-slide">
                  <div>
                    <div class="steps">
                      <span class="numstep">3</span>
                      <div>
                        <h2>Step 3</h2>
                        <p>
                          Put an Minimum and Maximum Quantity of Engagement you
                          want in your daily posts.
                        </p>
                      </div>
                    </div>
                    <div class="steps">
                      <span class="numstep">4</span>
                      <div>
                        <h2>Step 4</h2>
                        <p>Set an Expiry Date where the Campaign will End.</p>
                      </div>
                    </div>
                  </div>
                  <button class="btn btn-nxt btn-next-subscription">
                    Okay, next
                  </button>
                </div>
                <div class="swiper-slide">
                  <div>
                    <div class="recsub">
                      <span class="redrec">Recommendation</span>
                      <p>
                        Maintain an healthy wallet balance so that we can work
                        automatically with your new posts. Else the campaign
                        will be paused due to insufficient wallet balance.
                      </p>
                    </div>
                    <button class="btn btn-faqscls btn-close-subscription">
                      Close
                    </button>
                  </div>
                </div>
              </div>
              <div class="swiper-pagination-subscription"></div>
            </div>
          </div>
        </div>
      </div>
    </div>


  
<style>
        
  body{
       background: #f4f9ff;
       
  }
        /*nav.guestnav {
    background: transparent;
    border-bottom: none;
    box-shadow: none;
    border-color: transparent;
    backdrop-filter: blur(500px);
        }*/
  .form-group input {
    background: #ffffff;
    border: 1px solid #00000010;
    box-shadow: 2px 2px 150px -20px #000000;
    border-radius: 12px;
    height: 55px;
    padding-left: 18px;
    transition: all 0.5s ease;
  }
  .form-group label {
    position: absolute;
    top: 18px;
    left: 18px;
    font-weight: 500;
    color: #00000080;
    pointer-events: none;
    transition: all 0.5s ease;
  }
  .form-group {
    margin-bottom: 15px;
    position: relative;
  }
  .form-control:focus + .control-label, .form-group.filled .control-label {
    top: 13px;
    font-size: 10px;
    color: #64add3;
  }
  .form-control:focus, .form-group.filled .form-control {
    padding-bottom: 0;
    padding-top: 15px;
  }
  iframe.ytiframetut {
    border-radius: 12px;
    margin: 10px 0;
  }
        body .signupSec {
        background-image: none !important;
        }
</style>
<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%, #178acc 0%, #FF5A5A10 100%), #2780e3 !important;
              background: #2780e3;
              /*box-shadow: #033c7350 0px 20px 30px;*/
              box-shadow: 0px 1.18245px 2.3649px 0px #178acc, 0px 0px 0px 1.18245px #2780e3, 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>
.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>
<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>
{% include 'footer.twig' %}

<script src='https://www.google.com/recaptcha/api.js'></script>
<script src="https://res.cloudinary.com/ducwr0k65/raw/upload/v1732772108/jquery.min_fxcw3f.js"></script>
<script>
      // Inline script to set the theme insertBeforeText the DOM is fully loaded
      (function () {
        const theme = localStorage.getItem("theme");
        if (theme === "dark") {
          document.documentElement.classList.add("darkmode");
        }
      })();
    </script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    var inputFields = document.querySelectorAll('.form-control');

    inputFields.forEach(function(inputField) {
      inputField.addEventListener('input', function() {
        var formGroup = inputField.closest('.form-group');
        if (inputField.value !== '') {
          formGroup.classList.add('filled');
        } else {
          formGroup.classList.remove('filled');
        }
      });
    });
  });
</script>
<script>
  document.addEventListener("DOMContentLoaded", function() {
    var inputElements = document.querySelectorAll(".form-control");
    inputElements.forEach(function(inputElement) {
      inputElement.disabled = true;
    });

    setTimeout(function() {
      inputElements.forEach(function(inputElement) {
        inputElement.disabled = false;
      });
    }, 500); // Enable after 1 second (1000 milliseconds)
  });
</script>
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script>
      document.addEventListener('DOMContentLoaded', function() {
          change_cat(); 
      
      
          document.getElementById('orderCategory').addEventListener('change', function() {
              change_cat();
          });
      
          document.getElementById('OrderService').addEventListener('load', function() {
              let service_ID = this.getAttribute('data-id');
              addon_details(service_ID);
          });
      });
      
        </script>
<script
      type="text/javascript"
      src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
    ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></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];
          }
        }
      }

      var select_service_id = getUrlParameter("buy");
      if (select_service_id) {
        var selectSerCatID =
          window.modules.siteOrder.services[select_service_id].cid;
        let orderCat = document.getElementById("orderCategory");
        let orderSer = document.getElementById("OrderService");

        $(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>
      $(".menu").click(function () {
        $(this).toggleClass("open");
      });
    </script>
<script>
      function openSidebar() {
        $(".sidebar").toggleClass("sideOpened");
        $(".hamburget").toggleClass("tog");
        $(".sidebaroverlay").toggleClass("active");
      }
    </script>
<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>
<script>
					if( (self.parent && !(self.parent===self))
						&&(self.parent.frames.length!=0)){
						self.parent.location=document.location
					}
					</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.tablesorter/2.27.6/js/jquery.tablesorter.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/10.0.0/sweetalert2.all.min.js" defer ></script>
<script> window.modules=["global","signup","settings","signin"];window.modules.global={"cdn":"cdn.1panel.link"};window.modules.signin={"allow_google_login":"1","allow_average_time_option":"1"};window.modules.signup={"skype":0,"full_name":0,"whatsapp":1,"website":0,"telegram":0,"phone":0}; </script>
<script src="https://cdn.1panel.link/toolkit.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" defer ></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.13.14/js/bootstrap-select.min.js"  defer integrity="sha512-CJXg3iK9v7yyWvjk2npXkQjNQ4C1UES1rQaNB7d7ZgEVX2a8/2BmtDmtTclW4ial1wQ41cU34XPxOw+6xJBmTQ=="  crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.1panel.link/application.v24.09.27.v5.js" defer></script>
<script>;
		
function fn60sec() {
var xhttp = new XMLHttpRequest();xhttp.onreadystatechange = function() 
{if (this.readyState == 4 && this.status == 200) {console.log("Yes");}};xhttp.open("GET", "check-auth", true);xhttp.setRequestHeader("Content-type", "application/json");xhttp.send();
}
(function() {

$(".placeorder-btn").click(function(e) {
var href= e.currentTarget.dataset.href;
window.location.href = href;
});

})();
</script>
<script type="text/javascript" src="https://cdn.1panel.link/ny2893848_3.js"></script>
<script type="text/javascript" >
     document.addEventListener('DOMContentLoaded', function() { 
var newYearEvent = new window.NewYearEvent({"snow":{"init":true,"options":{"particles":{"move":{"speed":3,"bounce":false,"enable":true,"random":false,"attract":{"enable":false,"rotateX":600,"rotateY":1200},"out_mode":"out","straight":false,"direction":"bottom"},"size":{"anim":{"sync":false,"speed":20,"enable":false,"size_min":0.1000000000000000055511151231257827021181583404541015625},"value":5,"random":true},"color":{"value":"#fff"},"number":{"value":20,"density":{"enable":true,"value_area":650}},"opacity":{"anim":{"sync":false,"speed":1,"enable":true,"opacity_min":0.90000000000000002220446049250313080847263336181640625},"value":0.90000000000000002220446049250313080847263336181640625,"random":true},"line_linked":{"color":"#ffffff","width":1,"enable":false,"opacity":0.8000000000000000444089209850062616169452667236328125,"distance":500}},"interactivity":{"modes":{"bubble":{"size":4,"speed":3,"opacity":1,"distance":400,"duration":0.299999999999999988897769753748434595763683319091796875},"repulse":{"speed":3,"distance":200,"duration":0.40000000000000002220446049250313080847263336181640625}},"events":{"resize":true,"onclick":{"mode":"repulse","enable":true},"onhover":{"mode":"bubble","enable":false}},"detect_on":"window"},"retina_detect":true}},"toys":{"init":false,"options":{"count":"20","speed":1,"images":[],"maxSize":30,"launches":"1"}},"garland":{"init":false,"options":{"type":"apple","style":"style1"}},"fireworks":{"init":false,"options":{"delay":{"max":30,"min":30},"friction":0.9499999999999999555910790149937383830547332763671875}}})
newYearEvent.start()
});   </script>
<script
    type="text/javascript"
    src="https://cdn.mypanel.link/edeed4/0ibj57ayq9ej47yb.js"
  ></script>
<script>
    $("#message").on("keyup", function () {
      var val = $(this).val();
      $("#hmessage").val(val);
    });
  </script>
<script>
    $(document).ready(function () {
      $(".gridfaq").slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        autoplay: true,
        autoplaySpeed: 2000, // Change to your desired autoplay speed in milliseconds
        responsive: [
          {
            breakpoint: 1240, // For desktop
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
              infinite: true,
              dots: true,
            },
          },
          {
            breakpoint: 767, // For mobile
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              infinite: true,
              dots: true,
            },
          },
        ],
      });
    });
  </script>
<script>
    $(document).ready(function () {
      $(".testimonial-slider").slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        dots: false,
        arrows: false,
        autoplay: true,
        autoplaySpeed: 2000, // Change to your desired autoplay speed in milliseconds
        responsive: [
          {
            breakpoint: 1240, // For desktop
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
              infinite: true,
              arrows: false,
              dots: false,
            },
          },
          {
            breakpoint: 767, // For mobile
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              infinite: true,
              arrows: false,
              dots: false,
            },
          },
        ],
      });

      $(".testimonial-slidertwo").slick({
        slidesToShow: 3,
        slidesToScroll: 1,
        rtl: true,
        arrows: false,
        dot: false,
        autoplay: true,
        autoplaySpeed: 2000, // Change to your desired autoplay speed in milliseconds
        responsive: [
          {
            breakpoint: 1240, // For desktop
            settings: {
              slidesToShow: 2,
              slidesToScroll: 1,
              rtl: true,
              infinite: true,
              arrows: false,
              dots: false,
            },
          },
          {
            breakpoint: 767, // For mobile
            settings: {
              slidesToShow: 1,
              slidesToScroll: 1,
              rtl: true,
              infinite: true,
              arrows: false,
              dots: false,
            },
          },
        ],
      });
    });
  </script>
<script>
    $(document).ready(function () {
        // Initialize the selectpicker
        $("#payment_type").selectpicker();
    
        // Iterate through each option and add images and text to data-content
        $("#payment_type option").each(function () {
            let imgTag = '';
            if ($(this).text().includes("Phonepe")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198327/20240924_223703_pe2sud.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("Paytm")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198419/20240924_221314_nslulx.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("Gpay")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198289/20240924_224558_f2bmbh.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("Easypaisa")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198400/20240924_221530_sqtl7b.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("Jazzcash")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198455/20240924_221921_z38j0o.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("BKASH / NAGAD / ROCKET")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198364/20240924_223320_nbjjlr.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("Gcash")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198385/20240924_223441_t1ik2q.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("Binance")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198339/20240924_223229_dovzsv.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("Perfect Money")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198432/20240924_222700_fkb3fh.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("Crypto")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198303/20240924_224352_a6ief6.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("MasterCard")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198351/20240924_224525_n76acb.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("Voucher System")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727199101/20240924_230030_xkw7j2.jpg" class="img_addfunds" alt="img"> `;
            } else if ($(this).text().includes("PayPal")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198317/20240924_224450_hchxcz.jpg" class="img_addfunds" alt="img"> `;
            }
        
            else if ($(this).text().includes("Bkash | Nagad | Rocket")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198364/20240924_223320_nbjjlr.jpg" class="img_addfunds" alt="img"> `;
            }

            else if ($(this).text().includes("Touch n Go Manual")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198408/20240924_223356_ka6rtv.jpg" class="img_addfunds" alt="img"> `;
            }

            else if ($(this).text() == "Easypaisa Jazzcash Bank" || $(this).text().includes("Easypaisa Jazzcash Bank")) {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727198374/20240924_222306_ca4zml.jpg" class="img_addfunds" alt="img"> `;
            }

             else {
                imgTag = `<img src="https://res.cloudinary.com/dzogqeqlt/image/upload/v1727199531/20240924_230645_frqfzz.jpg" class="img_addfunds" alt="img"> `;
            }
    
            // Set the data-content attribute for each option
            $(this).attr('data-content', imgTag + $(this).text());
        });
    
        // Refresh the selectpicker to reflect changes
        $("#payment_type").selectpicker("refresh");
    });
    </script>
<script
    type="text/javascript"
    src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
  ></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
    if(document.getElementsByClassName('status_checker')){
     
        function checkStatus() {
            const input = document.getElementById('u-statusInput').value.toLowerCase();
            const statusCard = document.getElementById('u-statusCard');
            const getInfoBtn = document.getElementById('getInfoBtn');

            if (!input) {
                statusCard.textContent = "Please enter a valid input.";
                statusCard.className = 'u-card failure';
                statusCard.style.display = 'block';
                return;
            }

            // Disable button and show loading state
            getInfoBtn.disabled = true;
            getInfoBtn.textContent = "Loading...";

            const post_data = `actionType=verify-spam-check&apiKey=&id=2331&link=${encodeURIComponent(input)}`;
            const xhttp = new XMLHttpRequest();

            xhttp.onreadystatechange = function () {
                if (this.readyState === 4) {
                    getInfoBtn.disabled = false;
                    getInfoBtn.textContent = "Get Info";

                    if (this.status === 200) {
                        try {
                            const data = JSON.parse(this.responseText);

                            if (data.success === 1) {
                                statusCard.textContent = `Spam filter is off.`;
                                statusCard.className = 'u-card';
                            } else {
                                if (data.message === "private_account") {
                                    statusCard.textContent = "The account is private";
                                } else if (data.message === "Spam Filter is not disabled yet.") {
                                    statusCard.textContent = "Spam filter is on.";
                                } else {
                                    statusCard.textContent = data.message || "Unknown error occurred.";
                                }

                                statusCard.className = 'u-card failure';
                            }
                        } catch (error) {
                            statusCard.textContent = `Error parsing response: ${error.message}`;
                            statusCard.className = 'u-card failure';
                        }
                    } else {
                        statusCard.textContent = `Error: Unable to complete the request. Status ${this.status}`;
                        statusCard.className = 'u-card failure';
                    }

                    statusCard.style.display = 'block';
                }
            };

            xhttp.open("POST", '/api', true);
            xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhttp.send(post_data);
        }

        // Function to fetch followers count
        function fetchFollowers() {
            const input = document.getElementById('u-userInput').value.toLowerCase();
            const userCard = document.getElementById('u-userCard');
            const fetchButton = document.querySelector('#u-rightBox button');

            if (!input) {
                userCard.textContent = "Please enter a valid username or link.";
                userCard.className = 'u-card failure';
                userCard.style.display = 'block';
                return;
            }

            // Disable button and show loading state
            fetchButton.disabled = true;
            fetchButton.textContent = "Loading...";

            const xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState === 4) {
                    fetchButton.disabled = false;
                    fetchButton.textContent = "Get Info";

                    if (this.status === 200) {
                      
                        try {
                            const data = JSON.parse(this.responseText);
                           
                            if (data) {
                                const details = data.profile_data;
                             
                                userCard.innerHTML = `
                                       <p><strong>Full Name:</strong> ${details.full_name}</p>
                                       <p><strong>Followers:</strong> ${details.followers}</p>
                                   `;
                                userCard.className = 'u-card';
                            } else {
                                if (data.message === "private_account") {
                                    userCard.textContent = "The account is private";
                                } else if (data.message === "Spam Filter is not disabled yet.") {
                                    userCard.textContent = "Spam filter is on.";
                                } else {
                                    userCard.textContent = data.message || "Unknown error occurred.";
                                }
                                userCard.className = 'u-card failure';
                            }
                        } catch (error) {
                            userCard.textContent = `Error parsing response: ${error.message}`;
                            userCard.className = 'u-card failure';
                        }
                    } else {
                        userCard.textContent = `Error: Unable to complete the request. Status ${this.status}`;
                        userCard.className = 'u-card failure';
                    }

                    userCard.style.display = 'block';
                }
            };

            const post_data = `actionType=verify-spam-check&apiKey=&id=2331&link=${encodeURIComponent(input)}`;


            xhttp.open("POST", '/api', true);
            xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
            xhttp.send(post_data);
        }

    }
$(window).on("scroll", function () {
            if ($(window).scrollTop()) {
                $('nav').addClass('black')
            } else {
                $('nav').removeClass('black')
            }
        });
$(window).on("scroll", function() {
            if ($(this).scrollTop() > 200) {
                $(".scroll-to-top").fadeIn(200);
            } else {
                $(".scroll-to-top").fadeOut(200);
            }
        });

        // Animate the scroll to top
        $(".scroll-to-top").on("click", function(event) {
            event.preventDefault();
            $("html, body").animate({scrollTop: 0}, 300);
        });

        var lastTouchEnd = 0;
        document.addEventListener('touchend', function (event) {
            var now = (new Date()).getTime();
            if (now - lastTouchEnd <= 300) {
                event.preventDefault();
            }
            lastTouchEnd = now;
        }, false);

        document.addEventListener('touchmove', function (event) {
            if (event.scale !== 1) { 
                event.preventDefault(); 
            }
        }, false);
</script> 
