<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>MultiService</title>
<link rel="shortcut icon" href="<?= base_url('asset/indeximg/logo.png'); ?>">

    <link rel="stylesheet" href="<?php echo base_url(); ?>asset/indexCss.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.theme.default.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/owl.carousel.js"></script>
    
    
  <style>
  
  
  
 /* Shake animation */
@keyframes shake {
  0% {transform:translateX(0)}
  25% {transform:translateX(-6px)}
  50% {transform:translateX(6px)}
  75% {transform:translateX(-6px)}
  100% {transform:translateX(0)}
}
.shake{animation:shake .4s}

/* Error UI */
.input-error{
  border:1px solid #ff4d4f !important;
  background:#fff5f5;
}
.error-text{
  color:#ff4d4f;
  font-size:13px;
  margin-top:6px;
}


 
@keyframes shake {
  0% {transform:translateX(0)}
  25% {transform:translateX(-6px)}
  50% {transform:translateX(6px)}
  75% {transform:translateX(-6px)}
  100% {transform:translateX(0)}
}
.shake { animation: shake .4s }

.loader{
  width:18px;
  height:18px;
  border:2px solid white;
  border-top:2px solid transparent;
  border-radius:50%;
  display:inline-block;
  animation:spin .7s linear infinite
}
@keyframes spin{100%{transform:rotate(360deg)}}
</style>
    
    
    
</head>
<body>
    
    
    <div class="modal" id="cropping">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
          <div class="modal-content" style="">
               <!-- Modal Header -->
               <div class="modal-header">
                  <h4 class="modal-title">Photo &amp; Sign Crop</h4>
                  <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
               </div>
               <!-- Modal body -->
               <div class="modal-body">
                  <!--gap-3-->
                  <div class="row">
                      <div class="col-md-6">
                         <div class="p-3 border border-18 mb-3">
                            <h5>Get Photo</h5>
                            <form class="text-center">
                               <div class="form-group">
                                  <label class="text-muted d-block">
                                  <span>Upload Photo <br>
                                  <i class="fa-solid fa-cloud-arrow-up fs-1 p-4 w-100 border-18" style="border: 2px dashed #ccc;"></i></span>
                                  <input type="file" name="img_pic" required="required" hidden="">
                                  </label>
                               </div>
                               <div class="text-center mt-2">
                                  <span class="edit-profile d-block p-2 border-18 col-md-10 mx-auto" style="background: linear-gradient(180deg, rgba(59, 130, 246, 0.10) 0%, rgba(99, 102, 241, 0.10) 100%)">
                                     <div class="row">
                                        <div class="col-md-4">
                                           <input type="text" placeholder="height" id="img_height_photo" name="img_height_photo" value="213" class="form-control">
                                           <label class="small">Height</label>
                                        </div>
                                        <div class="col-md-4">
                                           <input type="text" placeholder="width" id="img_width_photo" name="img_width_photo" value="213" class="form-control">
                                           <label class="small">Width</label>
                                        </div>
                                        <div class="col-md-4">
                                           <input type="text" placeholder="DPI" value="300" id="img_dpi_photo" name="img_dpi_photo" class="form-control">
                                           <label class="small">DPI</label>
                                        </div>
                                     </div>
                                  </span>
                                  <button class="btn bUtn mt-3">Get Photo</button>
                               </div>
                            </form>
                         </div>
                      </div>
                      <div class="col-md-6">
                         <div class="p-3 border border-18 mb-3">
                            <h5>Get Signeture</h5>
                            <form class="text-center">
                               <div class="form-group">
                                  <label class="text-muted d-block">
                                  <span>Upload Signature <br>
                                  <i class="fa-solid fa-cloud-arrow-up fs-1 p-4 w-100 border-18" style="border: 2px dashed #ccc;"></i></span>
                                  <input type="file" name="img_pic" required="required" hidden="">
                                  </label>
                               </div>
                               <div class="text-center mt-2">
                                  <span class="edit-profile d-block p-2 border-18 col-md-10 mx-auto" style="background: linear-gradient(180deg, rgba(59, 130, 246, 0.10) 0%, rgba(99, 102, 241, 0.10) 100%)">
                                     <!-- Width = 400, Height = 200, DPI = 600 -->
                                     <div class="row">
                                        <div class="col-md-4">
                                           <input type="text" placeholder="height" id="img_height" name="img_height_sign" value="200" class="form-control">
                                           <label class="small">Height</label>
                                        </div>
                                        <div class="col-md-4">
                                           <input type="text" placeholder="width" id="img_width" name="img_width_sign" value="400" class="form-control">
                                           <label class="small">Width</label>
                                        </div>
                                        <div class="col-md-4">
                                           <input type="text" placeholder="DPI" value="600" id="img_dpi" name="img_dpi_sign" class="form-control">
                                           <label class="small">DPI</label>
                                        </div>
                                     </div>
                                  </span>
                                  <button class="btn bUtn mt-3">Get Signeture</button>
                               </div>
                            </form>
                         </div>
                      </div>
                  </div>
                  <div class="p-3 border border-18">
                        <h5>Merge Images or PDF </h5>
                        <form class="text-center">
                           <label class="btn1 mb-4 tooltip--left active" id="pickfiles">
                              <svg xmlns="https://www.w3.org/2000/svg" width="20" height="20" stroke-linecap="round" stroke-width="2" stroke="#fff" fill="none" stroke-linejoin="round">
                                 <desc>Upload your file and transform it.</desc>
                                 <path d="M10 1.833v16.333"></path>
                                 <path d="M1.833 10h16.333"></path>
                              </svg>
                              <span>Select All Images or PDF files </span>
                              <input type="file" name="img_pic[]" required="required" multiple="multiple" accept="image/jpeg,image/gif,image/png,application/pdf,image" hidden="">
                           </label>
                           <p>Select all files at once by holding CTRL Button</p>
                           <button class="btn bUtn mt-3">click here to Merge </button>
                        </form>
                     </div>
                  <!---->
               </div>
            </div>
        </div>
    </div>
    
    <!-- The Modal -->
    <div class="modal" id="topUp">
      <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 20px">
    
          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">ADD TOP UP</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
    
          <!-- Modal body -->
          <div class="modal-body edit-profile">
            <div class="mb-3">
                <input type="text" placeholder="Enter User ID" class="form-control">
            </div>
            <div class="mb-3">
                <input type="text" placeholder="User Role" class="form-control">
            </div>
            <div class="">
                <input type="number" placeholder="Enter Amount Here" class="form-control">
            </div>
          </div>
    
          <!-- Modal footer -->
          <div class="modal-footer">
            <button type="button" class="btn bUtn">Click here for Rewamp Top-Up</button>
          </div>
    
        </div>
      </div>
    </div>
    
    <div class="modal" id="find">
      <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 20px">
    
          <!-- Modal Header -->
          <div class="modal-header">
            <h4 class="modal-title">Find Id</h4>
            <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
          </div>
    
          <!-- Modal body -->
          <div class="modal-body edit-profile">
            <div class="mb-3">
                <input type="number" placeholder="Enter Phone Number" class="form-control">
            </div>
            </div>
          </div>
    
    
        </div>
      </div>
    
    <div class="modal" id="login">
        <div class="modal-dialog modal-lg">
          <div class="modal-content" style="border-radius: 22px;">
      
            <!-- Modal body -->
            <div class="modal-body p-4">
              <div class="text-end">
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
              <div class="text-center">
                <img src="<?=base_url()?>indeximg/logo.png" alt="" style="width: 100px;">
                <div class="loginDiv">
                    <h3>Welcome to Multi Service!</h3>
                    <p style="color: rgba(32, 32, 32, 0.80);">Log in to explore personalized services, manage your requests,<br> and stay connected with trusted providers.</p>
                    <div class="edit-profile col-md-8 mx-auto">
                       <input id="phoneInput" type="text" placeholder="Enter Mobile No." class="form-control">
                       
             <input type="hidden" id="csrf_name" value="<?= $this->security->get_csrf_token_name(); ?>">
<input type="hidden" id="csrf_hash" value="<?= $this->security->get_csrf_hash(); ?>">


                        <div id="phoneError" class="error-text"></div>
                        <button id="send-Otp" class="btn bUtn mt-3">Send OTP</button>
                        <div class="d-flex gap-2 mt-4">
                            <span class="my-auto" style="background: linear-gradient(90deg, #007BFF 0%, rgba(0, 123, 255, 0.00) 100%); height: 1px;width: 120px;"></span>
                            <span style="font-weight: 500;">Other Log In Options</span>
                            <span class="my-auto" style="background: linear-gradient(90deg, #007BFF 0%, rgba(0, 123, 255, 0.00) 100%); height: 1px;width: 120px;"></span>
                        </div>
                        <div class="mt-3">
                            <button class="btn1 w-100 mb-3">
                                <svg xmlns="https://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                                <path d="M19.5 3C20.0304 3 20.5391 3.21071 20.9142 3.58579C21.2893 3.96086 21.5 4.46957 21.5 5V19C21.5 19.5304 21.2893 20.0391 20.9142 20.4142C20.5391 20.7893 20.0304 21 19.5 21H5.5C4.96957 21 4.46086 20.7893 4.08579 20.4142C3.71071 20.0391 3.5 19.5304 3.5 19V5C3.5 4.46957 3.71071 3.96086 4.08579 3.58579C4.46086 3.21071 4.96957 3 5.5 3H19.5ZM19 18.5V13.2C19 12.3354 18.6565 11.5062 18.0452 10.8948C17.4338 10.2835 16.6046 9.94 15.74 9.94C14.89 9.94 13.9 10.46 13.42 11.24V10.13H10.63V18.5H13.42V13.57C13.42 12.8 14.04 12.17 14.81 12.17C15.1813 12.17 15.5374 12.3175 15.7999 12.5801C16.0625 12.8426 16.21 13.1987 16.21 13.57V18.5H19ZM7.38 8.56C7.82556 8.56 8.25288 8.383 8.56794 8.06794C8.883 7.75288 9.06 7.32556 9.06 6.88C9.06 5.95 8.31 5.19 7.38 5.19C6.93178 5.19 6.50193 5.36805 6.18499 5.68499C5.86805 6.00193 5.69 6.43178 5.69 6.88C5.69 7.81 6.45 8.56 7.38 8.56ZM8.77 18.5V10.13H6V18.5H8.77Z" fill="white"/>
                            </svg> Log in with LinkedIn</button>
                            <button class="btn2 w-100">
                                <svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <g clip-path="url(#clip0_1947_5278)">
                                    <path d="M8.36104 0.789921C5.96307 1.6218 3.89506 3.20073 2.46077 5.2948C1.02649 7.38887 0.301526 9.88769 0.392371 12.4242C0.483217 14.9608 1.38508 17.4013 2.9655 19.3874C4.54591 21.3735 6.72158 22.8005 9.17292 23.4587C11.1603 23.9715 13.2424 23.994 15.2404 23.5243C17.0504 23.1177 18.7238 22.2481 20.0967 21.0005C21.5256 19.6624 22.5627 17.9602 23.0967 16.0768C23.677 14.0287 23.7803 11.8748 23.3985 9.78055H12.2385V14.4099H18.7017C18.5725 15.1483 18.2957 15.853 17.8878 16.4819C17.48 17.1107 16.9494 17.6509 16.3279 18.0699C15.5387 18.592 14.649 18.9432 13.716 19.1012C12.7803 19.2752 11.8205 19.2752 10.8848 19.1012C9.9364 18.9051 9.03923 18.5137 8.25042 17.9518C6.9832 17.0548 6.03168 15.7804 5.53167 14.3105C5.02319 12.8132 5.02319 11.1898 5.53167 9.69242C5.88759 8.64283 6.47598 7.68717 7.25292 6.8968C8.14203 5.9757 9.26766 5.31729 10.5063 4.99381C11.745 4.67034 13.0488 4.69429 14.2748 5.06305C15.2325 5.35703 16.1083 5.87068 16.8323 6.56305C17.561 5.83805 18.2885 5.11117 19.0148 4.38242C19.3898 3.99055 19.7985 3.61742 20.1679 3.21617C19.0627 2.18769 17.7654 1.3874 16.3504 0.861171C13.7736 -0.0744733 10.9541 -0.0996178 8.36104 0.789921Z" fill="white"/>
                                    <path d="M8.3607 0.788879C10.9536 -0.101264 13.7731 -0.0767817 16.3501 0.858254C17.7654 1.38806 19.062 2.1922 20.1657 3.2245C19.7907 3.62575 19.3951 4.00075 19.0126 4.39075C18.2851 5.117 17.5582 5.84075 16.832 6.562C16.1079 5.86964 15.2321 5.35599 14.2745 5.062C13.0489 4.69196 11.7451 4.66662 10.5061 4.98877C9.26712 5.31092 8.14079 5.96812 7.2507 6.88825C6.47377 7.67863 5.88538 8.63428 5.52945 9.68388L1.64258 6.6745C3.03384 3.91556 5.44273 1.80517 8.3607 0.788879Z" fill="#E33629"/>
                                    <path d="M0.611401 9.65703C0.820316 8.62164 1.16716 7.61896 1.64265 6.67578L5.52953 9.69266C5.02105 11.19 5.02105 12.8134 5.52953 14.3108C4.23453 15.3108 2.9389 16.3158 1.64265 17.3258C0.452308 14.9564 0.0892746 12.2567 0.611401 9.65703Z" fill="#F8BD00"/>
                                    <path d="M12.2372 9.77734H23.3972C23.7789 11.8716 23.6756 14.0255 23.0953 16.0736C22.5614 17.957 21.5242 19.6592 20.0953 20.9973C18.8409 20.0186 17.5809 19.0473 16.3265 18.0686C16.9484 17.6491 17.4792 17.1084 17.8871 16.4788C18.295 15.8493 18.5716 15.1439 18.7003 14.4048H12.2372C12.2353 12.8636 12.2372 11.3205 12.2372 9.77734Z" fill="#587DBD"/>
                                    <path d="M1.64062 17.3255C2.93687 16.3255 4.2325 15.3205 5.5275 14.3105C6.02851 15.7809 6.98138 17.0553 8.25 17.9518C9.04127 18.511 9.94037 18.8993 10.89 19.0918C11.8257 19.2658 12.7855 19.2658 13.7213 19.0918C14.6542 18.9339 15.5439 18.5826 16.3331 18.0605C17.5875 19.0393 18.8475 20.0105 20.1019 20.9893C18.7292 22.2375 17.0558 23.1078 15.2456 23.5149C13.2476 23.9846 11.1655 23.9621 9.17813 23.4493C7.60632 23.0296 6.13814 22.2898 4.86563 21.2762C3.51874 20.2068 2.41867 18.8592 1.64062 17.3255Z" fill="#319F43"/>
                                    </g>
                                    <defs>
                                    <clipPath id="clip0_1947_5278">
                                        <rect width="24" height="24" fill="white"/>
                                    </clipPath>
                                    </defs>
                                </svg> 
                                Continue with Google
                            </button>
                        </div>
                    </div>
                </div>
                <div class="OTPDiv" style="display: none;">
                    <h3>Welcome to Multi Service!</h3>
                    <h5>Verify Your Identity</h5>
                    <p class="mb-0 text-success">OTP successfully sent to: <span class="text-primary">xxxx573215</span>
                        
                    </p>
                    <div class="edit-profile col-md-7 mx-auto">
                       <div class="d-flex gap-4" id="otpBox">
   <input class="form-control text-center otp" maxlength="1">
   <input class="form-control text-center otp" maxlength="1">
   <input class="form-control text-center otp" maxlength="1">
   <input class="form-control text-center otp" maxlength="1">
</div>
<div id="otpError" class="error-text text-center"></div>
                        <button class="btn bUtn mt-3" id="verify-OTP">Verify OTP</button>
                       <p class="mt-3 mb-0 text-center text-danger" id="otpTimer">
   Resend OTP in <b>00:30</b>
</p>

<button id="resendBtn" class="btn btn-outline-primary mt-3 w-100" style="display:none">
   Resend OTP
</button>

<div id="otpError" class="error-text text-center mt-2"></div>

                        <div class="d-flex gap-2 mt-4">
                            <span class="my-auto" style="background: linear-gradient(90deg, #007BFF 0%, rgba(0, 123, 255, 0.00) 100%); height: 1px;width: 100px;"></span>
                            <span style="font-weight: 500;">Other Log In Options</span>
                            <span class="my-auto" style="background: linear-gradient(90deg, #007BFF 0%, rgba(0, 123, 255, 0.00) 100%); height: 1px;width: 100px;"></span>
                        </div>
                        <div class="mt-3">
                            <button class="btn2 w-100 mb-3">
                                <svg xmlns="https://www.w3.org/2000/svg" width="25" height="24" viewBox="0 0 25 24" fill="none">
                                <path d="M19.5 3C20.0304 3 20.5391 3.21071 20.9142 3.58579C21.2893 3.96086 21.5 4.46957 21.5 5V19C21.5 19.5304 21.2893 20.0391 20.9142 20.4142C20.5391 20.7893 20.0304 21 19.5 21H5.5C4.96957 21 4.46086 20.7893 4.08579 20.4142C3.71071 20.0391 3.5 19.5304 3.5 19V5C3.5 4.46957 3.71071 3.96086 4.08579 3.58579C4.46086 3.21071 4.96957 3 5.5 3H19.5ZM19 18.5V13.2C19 12.3354 18.6565 11.5062 18.0452 10.8948C17.4338 10.2835 16.6046 9.94 15.74 9.94C14.89 9.94 13.9 10.46 13.42 11.24V10.13H10.63V18.5H13.42V13.57C13.42 12.8 14.04 12.17 14.81 12.17C15.1813 12.17 15.5374 12.3175 15.7999 12.5801C16.0625 12.8426 16.21 13.1987 16.21 13.57V18.5H19ZM7.38 8.56C7.82556 8.56 8.25288 8.383 8.56794 8.06794C8.883 7.75288 9.06 7.32556 9.06 6.88C9.06 5.95 8.31 5.19 7.38 5.19C6.93178 5.19 6.50193 5.36805 6.18499 5.68499C5.86805 6.00193 5.69 6.43178 5.69 6.88C5.69 7.81 6.45 8.56 7.38 8.56ZM8.77 18.5V10.13H6V18.5H8.77Z" fill="white"/>
                            </svg> Log in with LinkedIn</button>
                            <button class="btn1 w-100">
                                <svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                    <g clip-path="url(#clip0_1947_5278)">
                                    <path d="M8.36104 0.789921C5.96307 1.6218 3.89506 3.20073 2.46077 5.2948C1.02649 7.38887 0.301526 9.88769 0.392371 12.4242C0.483217 14.9608 1.38508 17.4013 2.9655 19.3874C4.54591 21.3735 6.72158 22.8005 9.17292 23.4587C11.1603 23.9715 13.2424 23.994 15.2404 23.5243C17.0504 23.1177 18.7238 22.2481 20.0967 21.0005C21.5256 19.6624 22.5627 17.9602 23.0967 16.0768C23.677 14.0287 23.7803 11.8748 23.3985 9.78055H12.2385V14.4099H18.7017C18.5725 15.1483 18.2957 15.853 17.8878 16.4819C17.48 17.1107 16.9494 17.6509 16.3279 18.0699C15.5387 18.592 14.649 18.9432 13.716 19.1012C12.7803 19.2752 11.8205 19.2752 10.8848 19.1012C9.9364 18.9051 9.03923 18.5137 8.25042 17.9518C6.9832 17.0548 6.03168 15.7804 5.53167 14.3105C5.02319 12.8132 5.02319 11.1898 5.53167 9.69242C5.88759 8.64283 6.47598 7.68717 7.25292 6.8968C8.14203 5.9757 9.26766 5.31729 10.5063 4.99381C11.745 4.67034 13.0488 4.69429 14.2748 5.06305C15.2325 5.35703 16.1083 5.87068 16.8323 6.56305C17.561 5.83805 18.2885 5.11117 19.0148 4.38242C19.3898 3.99055 19.7985 3.61742 20.1679 3.21617C19.0627 2.18769 17.7654 1.3874 16.3504 0.861171C13.7736 -0.0744733 10.9541 -0.0996178 8.36104 0.789921Z" fill="white"/>
                                    <path d="M8.3607 0.788879C10.9536 -0.101264 13.7731 -0.0767817 16.3501 0.858254C17.7654 1.38806 19.062 2.1922 20.1657 3.2245C19.7907 3.62575 19.3951 4.00075 19.0126 4.39075C18.2851 5.117 17.5582 5.84075 16.832 6.562C16.1079 5.86964 15.2321 5.35599 14.2745 5.062C13.0489 4.69196 11.7451 4.66662 10.5061 4.98877C9.26712 5.31092 8.14079 5.96812 7.2507 6.88825C6.47377 7.67863 5.88538 8.63428 5.52945 9.68388L1.64258 6.6745C3.03384 3.91556 5.44273 1.80517 8.3607 0.788879Z" fill="#E33629"/>
                                    <path d="M0.611401 9.65703C0.820316 8.62164 1.16716 7.61896 1.64265 6.67578L5.52953 9.69266C5.02105 11.19 5.02105 12.8134 5.52953 14.3108C4.23453 15.3108 2.9389 16.3158 1.64265 17.3258C0.452308 14.9564 0.0892746 12.2567 0.611401 9.65703Z" fill="#F8BD00"/>
                                    <path d="M12.2372 9.77734H23.3972C23.7789 11.8716 23.6756 14.0255 23.0953 16.0736C22.5614 17.957 21.5242 19.6592 20.0953 20.9973C18.8409 20.0186 17.5809 19.0473 16.3265 18.0686C16.9484 17.6491 17.4792 17.1084 17.8871 16.4788C18.295 15.8493 18.5716 15.1439 18.7003 14.4048H12.2372C12.2353 12.8636 12.2372 11.3205 12.2372 9.77734Z" fill="#587DBD"/>
                                    <path d="M1.64062 17.3255C2.93687 16.3255 4.2325 15.3205 5.5275 14.3105C6.02851 15.7809 6.98138 17.0553 8.25 17.9518C9.04127 18.511 9.94037 18.8993 10.89 19.0918C11.8257 19.2658 12.7855 19.2658 13.7213 19.0918C14.6542 18.9339 15.5439 18.5826 16.3331 18.0605C17.5875 19.0393 18.8475 20.0105 20.1019 20.9893C18.7292 22.2375 17.0558 23.1078 15.2456 23.5149C13.2476 23.9846 11.1655 23.9621 9.17813 23.4493C7.60632 23.0296 6.13814 22.2898 4.86563 21.2762C3.51874 20.2068 2.41867 18.8592 1.64062 17.3255Z" fill="#319F43"/>
                                    </g>
                                    <defs>
                                    <clipPath id="clip0_1947_5278">
                                        <rect width="24" height="24" fill="white"/>
                                    </clipPath>
                                    </defs>
                                </svg> 
                                Continue with Google
                            </button>
                        </div>
                    </div>
                </div>
                <div class="setPassDiv" style="display: none;">
                    <h3>Welcome to Multi Service!</h3>
                    <p class="mb-0" style="color: rgba(32, 32, 32, 0.80);">Let’s set up your login details. 
                        <br>Keep your credentials safe.</p>
                    <div class="edit-profile col-md-7 mx-auto">
                        <input id="nameInput" type="text" placeholder="Enter Username" class="form-control">
<div id="nameError" class="error-text"></div>

                        <div class="mt-3"></div>
                      
<input id="passInput" type="email" placeholder="Enter Email" class="form-control mt-3">
<div id="passError" class="error-text"></div>




                    </div>
                    <div class="col-md-10 mx-auto">
                        <span class="small" style="padding: 8px;border-radius: 16px;background: #FFF3F3;font-size: 0.8rem;">
                            <svg xmlns="https://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 21" fill="none">
                                <path d="M11 1.75C6.17 1.75 2.25 5.67 2.25 10.5C2.25 15.33 6.17 19.25 11 19.25C15.83 19.25 19.75 15.33 19.75 10.5C19.75 5.67 15.83 1.75 11 1.75ZM11.875 14.875H10.125V9.625H11.875V14.875ZM11.875 7.875H10.125V6.125H11.875V7.875Z" fill="#FF0000" fill-opacity="0.5"/>
                            </svg> For your security, use a mix of letters, numbers, and special characters.</span>
                        <button class="btn bUtn mt-5">Explore Services</button>
                    </div>
                </div>
    
              </div>
            </div>
      
          </div>
        </div>
    </div>
    
    <div class="modal" id="admin">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
          <div class="modal-content" style="border-radius: 15px;">
            
            <!-- Modal Header -->
              <div class="modal-header">
                <div>
                  <div class="d-flex gap-3">
                    <h4 class="mb-0">Admin Registration Form</h4>
                    <div class="my-auto">
                       <button class="btn bUtn">Fee Rs. 499 /-</button>
                    </div>
                  </div>
                  <p class="mb-0">Please fill in this form to create an account.</p>
              </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
      
            <!-- Modal body -->
            <div class="modal-body p-4">
              <div class="formBG position-relative">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="imgDiv">
                                <img src="<?php echo base_url(); ?>asset/indeximg/admin.png" class="w-75" alt="">
                                <div class="textDiv">
                                    <div class="d-flex  justify-content-between">
                                        <span class="fs-20 fw600">Admin</span>
                                        <span class="fs-24 fw600">₹499</span>
                                    </div>
                                    <ul>
                                        <li><span class="fw500">Unlimited</span> (UTI Revamp ID, PMJAY, Retailer &amp; Distributer)</li>
                                        <li><span class="fw500">Tour &amp;and Travel facilities </span> (Flight, Hotel Bus Booking)</li>
                                        <li><span class="fw500">Create Your own Admin Panel</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8">

                          <div class="nav-bar d-flex gap-2 bg-white shadow-sm rounded-3 fw-bold mb-3" style="font-size:0.8rem;">
                            <a href="#" class="nav-link step-link active" data-step="1">
                              <span class="btn btn-light fw-bold border">1</span>
                              <span>Personal Details</span>
                            </a>
                            <a href="#" class="nav-link step-link" data-step="2">
                              <span class="btn btn-light fw-bold border">2</span>
                              <span>Add Address</span>
                            </a>
                            <a href="#" class="nav-link step-link" data-step="3">
                              <span class="btn btn-light fw-bold border">3</span>
                              <span>Upload Documents</span>
                            </a>
                            <a href="#" class="nav-link step-link" data-step="4">
                              <span class="btn btn-light fw-bold border">4</span>
                              <span>Payment</span>
                            </a>
                          </div>
                        
                          <form id="multiStepForm" class="custom-form">
                        
                            <!-- STEP 1 -->
                            <div class="form-step step-1 row">
                              <div class="col-md-6">
                                <label class="form-label">Company Name *</label>
                                <input type="text" class="form-control" placeholder="Enter Company Name">
                              </div>
                        
                              <div class="col-md-6">
                                <label class="form-label">GST (Optional)</label>
                                <input type="text" class="form-control" placeholder="Enter GST">
                              </div>
                        
                              <div class="col-md-6">
                                <label class="form-label">Your Name *</label>
                                <input type="text" class="form-control" placeholder="Enter Name">
                              </div>
                        
                              <div class="col-md-6">
                                <label class="form-label">Email *</label>
                                <input type="email" class="form-control" placeholder="Enter Email">
                              </div>
                        
                              <div class="col-md-6">
                                <label class="form-label">PAN Number *</label>
                                <input type="text" class="form-control" placeholder="Enter PAN">
                              </div>
                        
                              <div class="col-md-6">
                                <label class="form-label">Contact Number *</label>
                                <input type="text" class="form-control" placeholder="Enter Contact Number">
                              </div>
                        
                              <div class="text-center mt-4">
                                <button type="button" class="btn btn-dark next-btn" data-next="2">Next</button>
                              </div>
                            </div>
                        
                            <!-- STEP 2 -->
                            <div class="form-step step-2 row d-none">
                              <div class="col-md-6">
                                <label class="form-label">Address *</label>
                                <input type="text" class="form-control" placeholder="Enter Address">
                              </div>
                        
                              <div class="col-md-6">
                                <label class="form-label">Pin Code *</label>
                                <input type="text" class="form-control" placeholder="Enter Pin Code">
                              </div>
                        
                              <div class="col-md-6">
                                <label class="form-label">City *</label>
                                <input type="text" class="form-control" placeholder="Enter City">
                              </div>
                        
                              <div class="col-md-6">
                                <label class="form-label">State *</label>
                                <select class="form-control">
                                  <option>Select State</option>
                                  <option>Delhi</option>
                                  <option>Haryana</option>
                                  <option>Odisha</option>
                                </select>
                              </div>
                        
                              <div class="text-center mt-4">
                                <button type="button" class="btn btn-dark next-btn" data-next="3">Next</button>
                              </div>
                            </div>
                        
                            <!-- STEP 3 -->
                            <div class="form-step step-3 row d-none">
                              <div class="col-md-6">
                                <label class="form-label">PAN Card *</label>
                                <input type="file" class="form-control">
                              </div>
                        
                              <div class="col-md-6">
                                <label class="form-label">Address Proof *</label>
                                <input type="file" class="form-control">
                              </div>
                        
                              <div class="col-md-12 mt-3">
                                <label class="form-label">Password</label>
                                <input type="password" class="form-control" placeholder="Enter Password">
                              </div>
                        
                              <div class="text-center mt-4">
                                <button type="button" class="btn btn-dark next-btn" data-next="4">Next</button>
                              </div>
                            </div>
                        
                            <!-- STEP 4 -->
                            <div class="form-step step-4 d-none">
                              <h5 class="text-warning">Pay ₹2999 now, rest later</h5>
                              <p>₹1000 per month</p>
                        
                              <div class="text-center mt-4">
                                <button type="submit" class="btn btn-dark">Submit</button>
                              </div>
                            </div>
                        
                          </form>

                        </div>
                    </div>
                </div>
              
            </div>
                <!-- Modal footer -->
              <div class="modal-footer">
                <button class="btn bUtn px-5">Create</button>
              </div>
          </div>
        </div>
    </div>
    
    <div class="modal" id="superDistributor">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
          <div class="modal-content" style="border-radius: 15px;">
            
            <!-- Modal Header -->
              <div class="modal-header">
                <div>
                  <div class="d-flex gap-3">
                    <h4 class="mb-0">Super Distributor Registration Form</h4>
                    <div class="my-auto">
                       <button class="btn bUtn">Fee Rs. 499 /-</button>
                    </div>
                  </div>
                  <p class="mb-0">Please fill in this form to create an account.</p>
              </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
      
            <!-- Modal body -->
            <div class="modal-body p-4">
              <div class="formBG position-relative">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="imgDiv">
                                <img src="<?php echo base_url(); ?>asset/indeximg/sd.png" class="img1" alt="">
                                <div class="textDiv">
                                    <div class="d-flex  justify-content-between">
                                        <span class="fs-20 fw600">Super Distributer</span>
                                        <span class="fs-24 fw600">₹499</span>
                                    </div>
                                    <ul>
                                        <li><span class="fw500">Unlimited</span> (UTI Revamp ID, PMJAY, Retailer &amp; Distributer)</li>
                                        <li><span class="fw500">Tour &amp;and Travel facilities </span> (Flight, Hotel Bus Booking)</li>
                                        <li><span class="fw500">Create Your own Admin Panel</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8 my-auto">
                            <p class="fs-20 fw500">Enter Your Details</p>
                            <div class="row formInputs">
                                <div class="col-md-6">
                                    <label for="">Enter Name*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter E-mail*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">PAN no.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Contact No.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter Address.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter PIN Code.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter City.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Select State*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-12">
                                    <label for="">Enter Referral Code (Optional)*</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
              
            </div>
                <!-- Modal footer -->
              <div class="modal-footer">
                <button class="btn bUtn px-5">Create</button>
              </div>
          </div>
        </div>
    </div>
    
    <div class="modal" id="distributor">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
          <div class="modal-content" style="border-radius: 15px;">
            
            <!-- Modal Header -->
              <div class="modal-header">
                <div>
                  <div class="d-flex gap-3">
                    <h4 class="mb-0">Distributor Registration Form</h4>
                    <div class="my-auto">
                       <button class="btn bUtn">Fee Rs. 499 /-</button>
                    </div>
                  </div>
                  <p class="mb-0">Please fill in this form to create an account.</p>
              </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
      
            <!-- Modal body -->
            <div class="modal-body p-4">
              <div class="formBG position-relative">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="imgDiv">
                                <img src="<?php echo base_url(); ?>asset/indeximg/distributor.png" class="img1" alt="">
                                <div class="textDiv">
                                    <div class="d-flex  justify-content-between">
                                        <span class="fs-20 fw600">Distributor</span>
                                        <span class="fs-24 fw600">₹499</span>
                                    </div>
                                    <ul>
                                        <li><span class="fw500">Unlimited</span> (UTI Revamp ID, PMJAY, Retailer &amp; Distributer)</li>
                                        <li><span class="fw500">Tour &amp;and Travel facilities </span> (Flight, Hotel Bus Booking)</li>
                                        <li><span class="fw500">Create Your own Admin Panel</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8 my-auto">
                            <p class="fs-20 fw500">Enter Your Details</p>
                            <div class="row formInputs">
                                <div class="col-md-6">
                                    <label for="">Enter Name*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter E-mail*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">PAN no.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Contact No.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter Address.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter PIN Code.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter City.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Select State*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-12">
                                    <label for="">Enter Referral Code (Optional)*</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <!-- Modal footer -->
              <div class="modal-footer">
                <button class="btn bUtn px-5">Create</button>
              </div>
          </div>
        </div>
    </div>
    
    <div class="modal" id="retailer">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
          <div class="modal-content" style="border-radius: 15px;">
            
            <!-- Modal Header -->
              <div class="modal-header">
                <div>
                  <div class="d-flex gap-3">
                    <h4 class="mb-0">Retailer Registration Form</h4>
                    <div class="my-auto">
                       <button class="btn bUtn">Fee Rs. 499 /-</button>
                    </div>
                  </div>
                  <p class="mb-0">Please fill in this form to create an account.</p>
              </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
      
            <!-- Modal body -->
            <div class="modal-body p-4">
              <div class="formBG position-relative">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="imgDiv">
                                <img src="<?php echo base_url(); ?>asset/indeximg/retailer.png" class="img1" alt="">
                                <div class="textDiv">
                                    <div class="d-flex  justify-content-between">
                                        <span class="fs-20 fw600">Retailer</span>
                                        <span class="fs-24 fw600">₹499</span>
                                    </div>
                                    <ul>
                                        <li><span class="fw500">Unlimited</span> (UTI Revamp ID, PMJAY, Retailer &amp; Distributer)</li>
                                        <li><span class="fw500">Tour &amp;and Travel facilities </span> (Flight, Hotel Bus Booking)</li>
                                        <li><span class="fw500">Create Your own Admin Panel</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8 my-auto">
                            <p class="fs-20 fw500">Enter Your Details</p>
                            <div class="row formInputs">
                                <div class="col-md-6">
                                    <label for="">Enter Name*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter E-mail*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">PAN no.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Contact No.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter Address.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter PIN Code.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter City.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Select State*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-12">
                                    <label for="">Enter Referral Code (Optional)*</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <!-- Modal footer -->
              <div class="modal-footer">
                <button class="btn bUtn px-5">Create</button>
              </div>
          </div>
        </div>
    </div>
    
    <div class="modal" id="revamp">
        <div class="modal-dialog modal-xl modal-dialog-centered modal-dialog-scrollable">
          <div class="modal-content" style="border-radius: 15px;">
            
            <!-- Modal Header -->
              <div class="modal-header">
                <div>
                  <div class="d-flex gap-3">
                    <h4 class="mb-0">Revamp Registration Form</h4>
                    <div class="my-auto">
                       <button class="btn bUtn">Fee Rs. 499 /-</button>
                    </div>
                  </div>
                  <p class="mb-0">Please fill in this form to create an account.</p>
              </div>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
      
            <!-- Modal body -->
            <div class="modal-body p-4">
              <div class="formBG position-relative">
                    <div class="row">
                        <div class="col-md-4">
                            <div class="imgDiv">
                                <img src="<?php echo base_url(); ?>asset/indeximg/rewamp.png" class="img1" alt="">
                                <div class="textDiv">
                                    <div class="d-flex  justify-content-between">
                                        <span class="fs-20 fw600">Revamp</span>
                                        <span class="fs-24 fw600">₹499</span>
                                    </div>
                                    <ul>
                                        <li><span class="fw500">Unlimited</span> (UTI Revamp ID, PMJAY, Retailer &amp; Distributer)</li>
                                        <li><span class="fw500">Tour &amp;and Travel facilities </span> (Flight, Hotel Bus Booking)</li>
                                        <li><span class="fw500">Create Your own Admin Panel</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-8 my-auto">
                            <p class="fs-20 fw500">Enter Your Details</p>
                            <div class="row formInputs">
                                <div class="col-md-6">
                                    <label for="">Enter Name*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Contact Person*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Address Line 1*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Address Line 2*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Address. Line 3</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Address Line 4</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Location*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Select District*</label>
                                    <select name="" class="form-select" id="">
                                        <option value=""></option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="">Select State*</label>
                                    <select name="" class="form-select" id="">
                                        <option value=""></option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <label for="">Pin*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">E-mail*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-6">
                                    <label for="">Enter Contact No.*</label>
                                    <input type="text" class="form-control">
                                </div>
                                <div class="col-md-12">
                                    <label for="">PAN No*</label>
                                    <input type="text" class="form-control">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
                <!-- Modal footer -->
              <div class="modal-footer">
                <button class="btn bUtn px-5">Create</button>
              </div>
          </div>
        </div>
    </div>
    
    
    <!-- <img src="Landing.png" style="width: 100%;" alt=""> -->
    <div class="bg-white">
        <div class="customDiv pt-4">
            <div class="nav-bar mob-hide">
              <div class="d-flex justify-content-between">
                <div class="nav_tab my-auto">
                  <img src="<?php echo base_url(); ?>asset/indeximg/logo.png" class="logo" alt="">
            
                  <a class="active" href="indexNew.html">Home</a>
            
                  <!-- Shops + Services Mega Menu -->
                  <div class="nav-item-Mega" id="megaTrigger">
                      <a href="#" class="shop-link" data-type="shop">Shop’s</a>
                      <a href="#" class="service-link" data-type="service">Services</a>
                    
                      <div class="mega-menu" id="megaMenu">
                        <div class="mega-column services-col">
                          <h4>Services</h4>
                          <ul>
                            <li><a href="#">Cab</a></li>
                            <li><a href="#">Matrimony</a></li>
                            <li><a href="#">Travel</a></li>
                            <li><a href="#">Study</a></li>
                            <li><a href="#">Astrology</a></li>
                            <li><a href="#">Health</a></li>
                            <li><a href="/Wl_index/jobkaro/">Job</a></li>
                            <li><a href="#">Repair</a></li>
                          </ul>
                        </div>
                    
                        <div class="mega-column shops-col">
                          <h4>Shops</h4>
                          <ul>
                            <li><a href="#">Fruits & Vegetable's</a></li>
                            <li><a href="#">Books & Stationery</a></li>
                            <li><a href="#">Hardware & Tools</a></li>
                            <li><a href="#">Pets</a></li>
                            <li><a href="#">Grocery</a></li>
                            <li><a href="#">Cloths & Fashion</a></li>
                            <li><a href="#">Paints</a></li>
                            <li><a href="#">Electronics</a></li>
                            <li><a href="#">Footwear</a></li>
                            <li><a href="#">Food</a></li>
                            <li><a href="#">Souvenir & Craft</a></li>
                            <li><a href="#">Toys & Games</a></li>
                            <li><a href="#">Health & Pharmacy</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>

                  <a href="#travelSection">Travel</a>
                  <a href="#" data-bs-toggle="modal" data-bs-target="#topUp">TOP-UP</a>
                  <a href="#" data-bs-toggle="modal" data-bs-target="#find">Find Id</a>
                  <a href="#" data-bs-toggle="modal" data-bs-target="#cropping">
                    <span>Cropping</span>
                  </a>
                  <a href="">About</a>
                </div>
            
            
            <?php
$loggedIn = $this->session->userdata('is_logged_in');
$name     = $this->session->userdata('name');
?>

                <div>
<?php if ($loggedIn): ?>

    <!-- When USER is LOGGED IN -->
    <span class="me-2 fw-semibold text-success">
        👋 Hi, <?= $name ?>
    </span>

    <a href="<?= base_url('Login/logout') ?>">
        <button class="btn2">Logout</button>&nbsp;
    </a>

<?php else: ?>

    <!-- When USER is NOT LOGGED IN -->
    <button class="btn1" data-bs-toggle="modal" data-bs-target="#login">Log In</button>
    &nbsp;
   
 <a href="joinUs.html" target="_blank">
        <button class="btn2">Join Us</button>
    </a>
<?php endif; ?>

</div>

              </div>
            </div>


            <div class="nav-bar mob-show">
                <div class="d-flex justify-content-between">
                    <div class="nav_tab my-auto">
                        <img src="<?php echo base_url(); ?>asset/indeximg/logo.png" class="logo" alt="">
                    </div>
                    <div class="d-flex align-items-center">
                        
                        
                        <?php if ($loggedIn): ?>
                        
                          <span class="me-2 fw-semibold text-success">
        👋 Hi, <?=$name ?>
    </span>
                        
                        
           

<?php else: ?>
                        
                        
                        
                        
                        <button class="btn1">Log In</button> &nbsp;
                        <button class="btn2">Join Us</button>&nbsp;
                        
                        <?php endif; ?>
                        <div class="dropdown my-auto">
                        <span type="button" class="" data-bs-toggle="dropdown">
                            ☰
                        </span>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item" href="#">Home</a></li>
                            <li><a class="dropdown-item" href="#">Shop’s</a></li>
                            <li><a class="dropdown-item" href="#">Services</a></li>
                            <li><a class="dropdown-item" href="#">Travel</a></li>
                            <li><a class="dropdown-item" href="#">TOP-UP</a></li>
                            <li><a class="dropdown-item" href="#">Find Id</a></li>
                            <li><a class="dropdown-item" href="#">Cropping</a></li>
                            <li><a class="dropdown-item" href="#">About</a></li>
                        </ul>
                        </div>
                    </div>
                </div> 
            </div>
            <div class="row">
                <div class="col-md-6 py-2 my-auto">
                    <div class="position-relative content">
                        <div>
                            <svg xmlns="https://www.w3.org/2000/svg" width="43" height="26" viewBox="0 0 43 26" fill="none">
                            <defs>
                                <linearGradient id="grad1" x1="0.071" y1="11.737" x2="25.157" y2="11.737" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                </linearGradient>
                                <linearGradient id="grad2" x1="0.269" y1="7.817" x2="16.269" y2="7.817" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                </linearGradient>
                            </defs>
                            <path d="M13.148 0.677c1.961 5.809 4.035 8.763 12.543 12.543-6.838 2.449-9.288 5.555-12.543 12.543C11.434 18.607 8.78 15.799.605 13.22 7.497 10.545 10.683 7.806 13.148.677Z" fill="url(#grad1)"/>
                            <path d="M34.609.763c1.25 3.705 2.573 5.589 8 8-4.361 1.562-5.924 3.543-8 8-1.093-4.564-2.786-6.355-8-8 4.396-1.706 6.428-3.453 8-8Z" fill="url(#grad2)" fill-opacity="0.5"/>
                            </svg>
                        </div>
                        <h1>Seamless <span class="underlineTxt">Travel</span> & Essential <br> Services, All in <span class="textBlu">One Place</span></h1>
                        <p>Your One-Stop Platform for Flight<br> Bookings, Hotel Reservations, Bus<br> Tickets,</p>
                        <div class="position-absolute" style="right: 45%; top: 45%">
                            <svg xmlns="https://www.w3.org/2000/svg" width="43" height="26" viewBox="0 0 43 26" fill="none">
                            <defs>
                                <linearGradient id="grad1" x1="0.071" y1="11.737" x2="25.157" y2="11.737" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                </linearGradient>
                                <linearGradient id="grad2" x1="0.269" y1="7.817" x2="16.269" y2="7.817" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                </linearGradient>
                            </defs>
                            <path d="M13.148 0.677c1.961 5.809 4.035 8.763 12.543 12.543-6.838 2.449-9.288 5.555-12.543 12.543C11.434 18.607 8.78 15.799.605 13.22 7.497 10.545 10.683 7.806 13.148.677Z" fill="url(#grad1)"/>
                            <path d="M34.609.763c1.25 3.705 2.573 5.589 8 8-4.361 1.562-5.924 3.543-8 8-1.093-4.564-2.786-6.355-8-8 4.396-1.706 6.428-3.453 8-8Z" fill="url(#grad2)" fill-opacity="0.5"/>
                            </svg>
                        </div>
                        <div class="position-absolute" style="left: 25%;bottom: 10%;">
                            <svg xmlns="https://www.w3.org/2000/svg" width="43" height="26" viewBox="0 0 43 26" fill="none">
                            <defs>
                                <linearGradient id="grad1" x1="0.071" y1="11.737" x2="25.157" y2="11.737" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                </linearGradient>
                                <linearGradient id="grad2" x1="0.269" y1="7.817" x2="16.269" y2="7.817" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                </linearGradient>
                            </defs>
                            <path d="M13.148 0.677c1.961 5.809 4.035 8.763 12.543 12.543-6.838 2.449-9.288 5.555-12.543 12.543C11.434 18.607 8.78 15.799.605 13.22 7.497 10.545 10.683 7.806 13.148.677Z" fill="url(#grad1)"/>
                            <path d="M34.609.763c1.25 3.705 2.573 5.589 8 8-4.361 1.562-5.924 3.543-8 8-1.093-4.564-2.786-6.355-8-8 4.396-1.706 6.428-3.453 8-8Z" fill="url(#grad2)" fill-opacity="0.5"/>
                            </svg>
                        </div>
                        <button class="btn bUtn mt-4">
                            <svg xmlns="https://www.w3.org/2000/svg" width="31" height="31" viewBox="0 0 31 31" fill="none">
                            <path d="M10.8077 20.5424L18.0677 18.1874L20.4227 10.9274L13.164 13.2836L10.8077 20.5424ZM15.6102 17.1299C15.2211 17.1299 14.8919 16.9936 14.6227 16.7211C14.3552 16.4486 14.2215 16.1182 14.2215 15.7299C14.2215 15.3407 14.3573 15.0115 14.629 14.7424C14.9015 14.4749 15.2319 14.3411 15.6202 14.3411C16.0094 14.3411 16.3386 14.4769 16.6077 14.7486C16.8761 15.0211 17.0102 15.3515 17.0102 15.7399C17.0102 16.129 16.874 16.4582 16.6015 16.7274C16.329 16.9957 15.9986 17.1299 15.6102 17.1299ZM15.619 26.9849C14.0632 26.9849 12.6007 26.6899 11.2315 26.0999C9.86232 25.509 8.67107 24.7074 7.65773 23.6949C6.6444 22.6824 5.84232 21.4924 5.25148 20.1249C4.66065 18.7574 4.36523 17.2953 4.36523 15.7386C4.36523 14.1819 4.66065 12.7194 5.25148 11.3511C5.84148 9.98195 6.6419 8.7907 7.65273 7.77736C8.66357 6.76403 9.85398 5.96195 11.224 5.37111C12.594 4.78028 14.0565 4.48486 15.6115 4.48486C17.1665 4.48486 18.629 4.78028 19.999 5.37111C21.3682 5.96111 22.5594 6.76195 23.5727 7.77361C24.5861 8.78528 25.3882 9.9757 25.979 11.3449C26.5698 12.714 26.8652 14.1761 26.8652 15.7311C26.8652 17.2861 26.5702 18.7486 25.9802 20.1186C25.3902 21.4886 24.5886 22.6799 23.5752 23.6924C22.5619 24.7049 21.3719 25.5069 20.0052 26.0986C18.6386 26.6903 17.1765 26.9857 15.619 26.9849ZM15.6152 25.7349C18.4019 25.7349 20.7652 24.7649 22.7052 22.8249C24.6452 20.8849 25.6152 18.5215 25.6152 15.7349C25.6152 12.9482 24.6452 10.5849 22.7052 8.64486C20.7652 6.70486 18.4019 5.73486 15.6152 5.73486C12.8286 5.73486 10.4652 6.70486 8.52523 8.64486C6.58523 10.5849 5.61523 12.9482 5.61523 15.7349C5.61523 18.5215 6.58523 20.8849 8.52523 22.8249C10.4652 24.7649 12.8286 25.7349 15.6152 25.7349Z" fill="white"/>
                            </svg> Explore More
                        </button>
                    </div>
                </div>
                <div class="col-md-6">
                    <img src="<?php echo base_url(); ?>asset/indeximg/img2.png" class="w-100" alt="">
                </div>
            </div>
        </div>
    </div>
    <div class="customDiv" id="travelSection">
        <div class="my-4">

            <ul class="row travelCardDv mx-0 nav nav-pills mx-0">
                <li class="nav-item travelCardWidth">
                <a class="nav-link active" data-bs-toggle="pill" href="#flight">
                <div class="">
                    <div class="travelCard">
                        <div class="p-4">
                            <h5>Flight</h5>
                            <p class="mb-0 mob-hide">Book flights at the lowest fares,<br> hassle-free!</p>
                        </div>
                        <img src="<?php echo base_url(); ?>asset/indeximg/flight.png" alt="" class="travelImg img1">
                    </div>
                </div>
                </a>
                </li>
                <li class="nav-item travelCardWidth">
                <a class="nav-link" data-bs-toggle="pill" href="#bus">
                <div class="">
                    <div class="travelCard">
                        <div class="p-4">
                        <h5>Bus</h5>
                        <p class="mb-0 mob-hide">Comfortable &amp; affordable<br> bus journeys across 
                            <br>India!
                        </p>
                        </div>
                        <img src="<?php echo base_url(); ?>asset/indeximg/bus.png" alt="" class="travelImg img2">
                    </div>
                </div>
                </a>
                </li>
                <li class="nav-item travelCardWidth">
                <a class="nav-link" data-bs-toggle="pill" href="#hotel">
                <div class="">
                    <div class="travelCard">
                        <div class="p-4">
                        <h5>Hotel</h5>
                        <p style="border-radius: 14px;background: linear-gradient(90deg, rgba(59, 130, 246, 0.30) 0%, rgba(99, 102, 241, 0.00) 100%);" class="mb-0 p-2 mob-hide">
                            <svg xmlns="https://www.w3.org/2000/svg" width="27" height="27" viewBox="0 0 27 27" fill="none">
                            <path d="M22.7952 13.6103L23.9912 11.5433C24.135 11.2947 24.1741 10.9991 24.0999 10.7216C24.0258 10.4441 23.8444 10.2074 23.5958 10.0635L21.5266 8.86751V6.48418C21.5266 6.19686 21.4125 5.92131 21.2093 5.71814C21.0062 5.51498 20.7306 5.40084 20.4433 5.40084H18.0611L16.8661 3.33276C16.7225 3.08395 16.486 2.90236 16.2086 2.82793C16.0711 2.79109 15.9277 2.7817 15.7866 2.80029C15.6456 2.81888 15.5095 2.86508 15.3863 2.93626L13.3171 4.13226L11.248 2.93518C10.9992 2.79152 10.7035 2.75259 10.4259 2.82695C10.1484 2.90131 9.9118 3.08286 9.76813 3.33168L8.57213 5.40084H6.18989C5.90257 5.40084 5.62702 5.51498 5.42385 5.71814C5.22069 5.92131 5.10655 6.19686 5.10655 6.48418V8.86643L3.03739 10.0624C2.91413 10.1337 2.80613 10.2285 2.71954 10.3415C2.63295 10.4545 2.56948 10.5834 2.53276 10.7209C2.49604 10.8585 2.48678 11.0019 2.50552 11.143C2.52426 11.2841 2.57063 11.4202 2.64197 11.5433L3.83797 13.6103L2.64197 15.6773C2.49896 15.9263 2.46015 16.2216 2.53402 16.499C2.60789 16.7765 2.78844 17.0134 3.0363 17.1583L5.10547 18.3543V20.7365C5.10547 21.0238 5.2196 21.2994 5.42277 21.5025C5.62593 21.7057 5.90148 21.8198 6.1888 21.8198H8.57213L9.76813 23.889C9.86404 24.053 10.001 24.1891 10.1655 24.2841C10.33 24.3791 10.5164 24.4296 10.7063 24.4307C10.8948 24.4307 11.0822 24.3808 11.2491 24.2844L13.3161 23.0884L15.3852 24.2844C15.6339 24.4282 15.9295 24.4673 16.207 24.3931C16.4845 24.319 16.7212 24.1376 16.8651 23.889L18.06 21.8198H20.4422C20.7295 21.8198 21.0051 21.7057 21.2083 21.5025C21.4114 21.2994 21.5255 21.0238 21.5255 20.7365V18.3543L23.5947 17.1583C23.718 17.087 23.826 16.9922 23.9126 16.8792C23.9991 16.7662 24.0626 16.6373 24.0993 16.4997C24.1361 16.3622 24.1453 16.2188 24.1266 16.0777C24.1078 15.9366 24.0615 15.8005 23.9901 15.6773L22.7952 13.6103ZM10.6077 8.18284C11.0388 8.18299 11.4522 8.35439 11.757 8.65934C12.0617 8.96428 12.2329 9.37781 12.2327 9.80893C12.2326 10.24 12.0612 10.6535 11.7562 10.9582C11.4513 11.2629 11.0378 11.4341 10.6066 11.4339C10.1755 11.4338 9.76211 11.2624 9.45736 10.9574C9.15262 10.6525 8.98149 10.239 8.98164 9.80784C8.98178 9.37672 9.15318 8.96332 9.45813 8.65857C9.76308 8.35382 10.1766 8.1827 10.6077 8.18284ZM10.9327 18.5828L9.19939 17.2839L15.6994 8.61726L17.4327 9.91618L10.9327 18.5828ZM16.0244 19.0162C15.8109 19.0161 15.5996 18.974 15.4024 18.8922C15.2052 18.8105 15.026 18.6907 14.8751 18.5397C14.7242 18.3887 14.6045 18.2094 14.5229 18.0122C14.4413 17.815 14.3993 17.6036 14.3994 17.3901C14.3995 17.1766 14.4416 16.9653 14.5233 16.7681C14.6051 16.5709 14.7249 16.3917 14.8759 16.2408C15.0269 16.0899 15.2061 15.9702 15.4034 15.8886C15.6006 15.807 15.812 15.765 16.0255 15.7651C16.4566 15.7652 16.87 15.9366 17.1747 16.2416C17.4795 16.5465 17.6506 16.9601 17.6505 17.3912C17.6503 17.8223 17.4789 18.2357 17.174 18.5404C16.869 18.8452 16.4555 19.0163 16.0244 19.0162Z" fill="#007BFF"/>
                            </svg>
                            Up to 50% off on luxury <br>hotels!
                        </p>
                        </div>
                        <img src="<?php echo base_url(); ?>asset/indeximg/hotel.png" alt="" class="travelImg img3">
                    </div>
                </div>
                </a>
                </li>
            </ul>

            <div class="tab-content ">
                <div class="tab-pane active" id="flight">
                    <div class="search_DIv">
                        <div class="row flightTabs">
                            <div class="col-md-9 px-0">
                                <div class="tab-content">
                                    <div class="tab-pane container px-0 active" id="home11">
                                        <div class="row mx-0">
                                            <div class="col-md-1 text-center my-auto">
                                                <svg xmlns="https://www.w3.org/2000/svg" width="43" height="42" viewBox="0 0 43 42" fill="none">
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M23.2235 15.4434C23.1257 15.3458 23.0482 15.23 22.9952 15.1024C22.9423 14.9748 22.915 14.8381 22.915 14.7C22.915 14.5618 22.9423 14.4251 22.9952 14.2975C23.0482 14.17 23.1257 14.0541 23.2235 13.9566L29.5235 7.65656C29.6211 7.55893 29.737 7.48149 29.8646 7.42866C29.9921 7.37583 30.1289 7.34863 30.2669 7.34863C30.405 7.34863 30.5417 7.37583 30.6692 7.42866C30.7968 7.48149 30.9127 7.55893 31.0103 7.65656C31.1079 7.75418 31.1854 7.87008 31.2382 7.99763C31.291 8.12519 31.3182 8.2619 31.3182 8.39996C31.3182 8.53802 31.291 8.67473 31.2382 8.80228C31.1854 8.92984 31.1079 9.04573 31.0103 9.14336L24.7103 15.4434C24.6128 15.5411 24.4969 15.6187 24.3693 15.6717C24.2418 15.7246 24.105 15.7518 23.9669 15.7518C23.8288 15.7518 23.6921 15.7246 23.5645 15.6717C23.4369 15.6187 23.3211 15.5411 23.2235 15.4434Z" fill="url(#paint0_linear_100_137)"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M37.3105 15.4434C37.213 15.5411 37.0971 15.6187 36.9696 15.6717C36.842 15.7246 36.7053 15.7518 36.5671 15.7518C36.429 15.7518 36.2923 15.7246 36.1647 15.6717C36.0372 15.6187 35.9213 15.5411 35.8237 15.4434L29.5237 9.14336C29.3266 8.9462 29.2158 8.67879 29.2158 8.39996C29.2158 8.12113 29.3266 7.85372 29.5237 7.65656C29.7209 7.4594 29.9883 7.34863 30.2671 7.34863C30.546 7.34863 30.8134 7.4594 31.0105 7.65656L37.3105 13.9566C37.4083 14.0541 37.4859 14.17 37.5388 14.2975C37.5918 14.4251 37.619 14.5618 37.619 14.7C37.619 14.8381 37.5918 14.9748 37.5388 15.1024C37.4859 15.23 37.4083 15.3458 37.3105 15.4434Z" fill="url(#paint1_linear_100_137)"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M30.2673 8.3999C30.5458 8.3999 30.8129 8.51053 31.0098 8.70744C31.2067 8.90435 31.3173 9.17142 31.3173 9.4499V29.3999C31.3173 29.6784 31.2067 29.9455 31.0098 30.1424C30.8129 30.3393 30.5458 30.4499 30.2673 30.4499C29.9889 30.4499 29.7218 30.3393 29.5249 30.1424C29.328 29.9455 29.2173 29.6784 29.2173 29.3999V9.4499C29.2173 9.17142 29.328 8.90435 29.5249 8.70744C29.7218 8.51053 29.9889 8.3999 30.2673 8.3999ZM20.5107 26.5565C20.6085 26.654 20.6861 26.7699 20.739 26.8975C20.792 27.025 20.8192 27.1618 20.8192 27.2999C20.8192 27.438 20.792 27.5748 20.739 27.7023C20.6861 27.8299 20.6085 27.9458 20.5107 28.0433L14.2107 34.3433C14.0136 34.5405 13.7462 34.6512 13.4673 34.6512C13.1885 34.6512 12.9211 34.5405 12.7239 34.3433C12.5268 34.1461 12.416 33.8787 12.416 33.5999C12.416 33.3211 12.5268 33.0537 12.7239 32.8565L19.0239 26.5565C19.1215 26.4587 19.2373 26.3811 19.3649 26.3282C19.4925 26.2753 19.6292 26.248 19.7673 26.248C19.9055 26.248 20.0422 26.2753 20.1698 26.3282C20.2973 26.3811 20.4132 26.4587 20.5107 26.5565Z" fill="url(#paint2_linear_100_137)"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M6.42371 26.5565C6.52125 26.4587 6.63712 26.3812 6.76468 26.3282C6.89225 26.2753 7.029 26.248 7.16711 26.248C7.30522 26.248 7.44198 26.2753 7.56954 26.3282C7.69711 26.3812 7.81298 26.4587 7.91051 26.5565L14.2105 32.8565C14.3081 32.9541 14.3856 33.07 14.4384 33.1976C14.4912 33.3252 14.5184 33.4619 14.5184 33.5999C14.5184 33.738 14.4912 33.8747 14.4384 34.0022C14.3856 34.1298 14.3081 34.2457 14.2105 34.3433C14.1129 34.4409 13.997 34.5184 13.8694 34.5712C13.7419 34.6241 13.6052 34.6512 13.4671 34.6512C13.329 34.6512 13.1923 34.6241 13.0648 34.5712C12.9372 34.5184 12.8213 34.4409 12.7237 34.3433L6.42371 28.0433C6.32593 27.9458 6.24835 27.8299 6.19542 27.7024C6.14248 27.5748 6.11523 27.438 6.11523 27.2999C6.11523 27.1618 6.14248 27.0251 6.19542 26.8975C6.24835 26.7699 6.32593 26.6541 6.42371 26.5565Z" fill="url(#paint3_linear_100_137)"/>
                                                <path fill-rule="evenodd" clip-rule="evenodd" d="M13.467 33.6C13.1885 33.6 12.9214 33.4894 12.7245 33.2925C12.5276 33.0956 12.417 32.8285 12.417 32.5501V12.6C12.417 12.3216 12.5276 12.0545 12.7245 11.8576C12.9214 11.6607 13.1885 11.55 13.467 11.55C13.7455 11.55 14.0125 11.6607 14.2095 11.8576C14.4064 12.0545 14.517 12.3216 14.517 12.6V32.5501C14.517 32.8285 14.4064 33.0956 14.2095 33.2925C14.0125 33.4894 13.7455 33.6 13.467 33.6Z" fill="url(#paint4_linear_100_137)"/>
                                                <defs>
                                                    <linearGradient id="paint0_linear_100_137" x1="27.1166" y1="7.34863" x2="27.1166" y2="15.7518" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#3B82F6"/>
                                                    <stop offset="1" stop-color="#6366F1"/>
                                                    </linearGradient>
                                                    <linearGradient id="paint1_linear_100_137" x1="33.4174" y1="7.34863" x2="33.4174" y2="15.7518" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#3B82F6"/>
                                                    <stop offset="1" stop-color="#6366F1"/>
                                                    </linearGradient>
                                                    <linearGradient id="paint2_linear_100_137" x1="21.8667" y1="8.3999" x2="21.8667" y2="34.6512" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#3B82F6"/>
                                                    <stop offset="1" stop-color="#6366F1"/>
                                                    </linearGradient>
                                                    <linearGradient id="paint3_linear_100_137" x1="10.3168" y1="26.248" x2="10.3168" y2="34.6512" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#3B82F6"/>
                                                    <stop offset="1" stop-color="#6366F1"/>
                                                    </linearGradient>
                                                    <linearGradient id="paint4_linear_100_137" x1="13.467" y1="11.55" x2="13.467" y2="33.6" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#3B82F6"/>
                                                    <stop offset="1" stop-color="#6366F1"/>
                                                    </linearGradient>
                                                </defs>
                                                </svg>
                                            </div>
                                            <div class="col-md-4">
                                                <input type="text" class="form-control mb-3" placeholder="Delhi">
                                                <input type="text" class="form-control" placeholder="Mumbai">
                                            </div>
                                            <div class="col-md-3">
                                                <input type="date" class="form-control mb-3" placeholder="Date">
                                                <select name="" class="form-select" id="">
                                                    <option value="">Economy</option>
                                                </select>
                                            </div>
                                            <div class="col-md-4">
                                                <div class="border border-12 p-2 h-100">
                                                    <p class="fs-18 mb-2">Passengers</p>
                                                    <div class="d-flex gap-2">
                                                        <select name="" class="form-select" id="">
                                                            <option value=""><span class="fs-18">2</span> Adult</option>
                                                        </select>
                                                        <select name="" class="form-select" id="">
                                                            <option value=""><span class="fs-18">1</span> Children</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="tab-pane container px-0 fade" id="menu11">
                                        <div class="row mx-0">
                                            <div class="col-md-1 text-center my-auto">
                                                <svg xmlns="https://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40" fill="none">
                                                <defs>
                                                    <linearGradient id="grad" x1="20" y1="0" x2="20" y2="40" gradientUnits="userSpaceOnUse">
                                                    <stop stop-color="#3B82F6"/>
                                                    <stop offset="1" stop-color="#6366F1"/>
                                                    </linearGradient>
                                                </defs>
                                                
                                                <!-- Up arrow -->
                                                <path d="M20 6 L12 14 M20 6 L28 14" stroke="url(#grad)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                                <line x1="20" y1="6" x2="20" y2="20" stroke="url(#grad)" stroke-width="3" stroke-linecap="round"/>
                                                
                                                <!-- Down arrow -->
                                                <path d="M20 34 L12 26 M20 34 L28 26" stroke="url(#grad)" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
                                                <line x1="20" y1="20" x2="20" y2="34" stroke="url(#grad)" stroke-width="3" stroke-linecap="round"/>
                                                </svg>
                                            </div>
                                            <div class="col-md-4">
                                                <input type="text" class="form-control mb-3" placeholder="Delhi">
                                                <input type="text" class="form-control" placeholder="Mumbai">
                                            </div>
                                            <div class="col-md-3">
                                                <input type="date" class="form-control mb-3" placeholder="Date">
                                                <input type="date" class="form-control mb-3" placeholder="Date">
                                            </div>
                                            <div class="col-md-4">
                                                <div class="d-flex gap-2 mb-2">
                                                    <select name="" class="form-select" id="">
                                                        <option value="">Economy</option>
                                                    </select>
                                                    <div class="align-self-end">
                                                        <p class="text-end bg-white border p-1 fw500" style="margin-bottom: -1rem;">Passengers</p>
                                                    </div>
                                                </div>
                                                
                                                <div class="border border-12 p-1">
                                                    <div class="d-flex gap-2">
                                                        <select name="" class="form-select" id="">
                                                            <option value=""><span class="fs-18">2</span> Adult</option>
                                                        </select>
                                                        <select name="" class="form-select" id="">
                                                            <option value=""><span class="fs-18">1</span> Children</option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="col-md-3">
                                <ul class="nav nav-pills justify-content-center gap-3">
                                    <li class="nav-item">
                                        <a class="nav-link active" data-bs-toggle="pill" href="#home11">
                                            <input class="form-check-input" type="radio" name="tripType" id="oneWay"> &nbsp;One Way</a>
                                    </li>
                                    <li class="nav-item">
                                        <a class="nav-link" data-bs-toggle="pill" href="#menu11">
                                            <input class="form-check-input" type="radio" name="tripType" id="roundTrip"> &nbsp;Round Trip</a>
                                    </li>
                                </ul>
                                <div class="text-center mt-3">
                                    <button class="btn bUtn">Search Flight</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="bus">
                    <div class="search_DIv">
                        <div class="row">
                            <div class="col-md-3">
                                <div class="border border-12 p-2 h-100">
                                    <p class="mb-2 small">City</p>
                                    <div class="d-flex gap-2">
                                        <select name="" class="form-select" id="">
                                        <option value=""><span class="fs-20">Delhi</span></option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3">
                                <input type="date" class="form-control mb-3" placeholder="Date">
                                <input type="date" class="form-control" placeholder="Date">
                            </div>
                            <div class="col-md-3">
                                <div class="border border-12 p-2 h-100">
                                    <p class="fs-18 mb-2">1 Room</p>
                                    <div class="d-flex gap-2">
                                        <select name="" class="form-select" id="">
                                        <option value=""><span class="fs-18">2</span> Adult</option>
                                        </select>
                                        <select name="" class="form-select" id="">
                                        <option value=""><span class="fs-18">1</span> Children</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3 my-auto">
                                <div class="text-center">
                                    <button class="btn bUtn">
                                        <svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path d="M21 21L17 17M19 11C19 13.1217 18.1571 15.1566 16.6569 16.6569C15.1566 18.1571 13.1217 19 11 19C8.87827 19 6.84344 18.1571 5.34315 16.6569C3.84285 15.1566 3 13.1217 3 11C3 8.87827 3.84285 6.84344 5.34315 5.34315C6.84344 3.84285 8.87827 3 11 3C13.1217 3 15.1566 3.84285 16.6569 5.34315C18.1571 6.84344 19 8.87827 19 11Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg> Search Bus
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="hotel">
                    <div class="search_DIv">
                        <div class="row">
                            <div class="col-md-1 text-center my-auto">
                                <svg xmlns="https://www.w3.org/2000/svg" width="43" height="42" viewBox="0 0 43 42" fill="none">
                                <defs>
                                    <linearGradient id="a" x1="27.117" y1="7.349" x2="27.117" y2="15.752" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                    </linearGradient>
                                    <linearGradient id="b" x1="33.417" y1="7.349" x2="33.417" y2="15.752" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                    </linearGradient>
                                    <linearGradient id="c" x1="21.867" y1="8.4" x2="21.867" y2="34.651" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                    </linearGradient>
                                    <linearGradient id="d" x1="10.317" y1="26.248" x2="10.317" y2="34.651" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                    </linearGradient>
                                    <linearGradient id="e" x1="13.467" y1="11.55" x2="13.467" y2="33.6" gradientUnits="userSpaceOnUse">
                                    <stop stop-color="#3B82F6"/><stop offset="1" stop-color="#6366F1"/>
                                    </linearGradient>
                                </defs>
                                <path fill="url(#a)" d="M23.224 15.443a.817.817 0 0 1 0-1.487l6.3-6.3a.817.817 0 0 1 1.157 1.157l-6.3 6.3a.817.817 0 0 1-1.157 0Z"/>
                                <path fill="url(#b)" d="M37.311 15.443a.817.817 0 0 1-1.157 0l-6.3-6.3a.817.817 0 1 1 1.157-1.157l6.3 6.3a.817.817 0 0 1 0 1.157Z"/>
                                <path fill="url(#c)" d="M30.267 8.4a.817.817 0 0 1 .742 1.05v19.95a.817.817 0 1 1-1.584 0V9.45a.817.817 0 0 1 .842-1.05Zm-9.756 18.157a.817.817 0 0 1 1.157 0l6.3 6.3a.817.817 0 1 1-1.157 1.157l-6.3-6.3a.817.817 0 0 1 0-1.157Z"/>
                                <path fill="url(#d)" d="M6.424 26.557a.817.817 0 0 1 1.157 0l6.3 6.3a.817.817 0 1 1-1.157 1.157l-6.3-6.3a.817.817 0 0 1 0-1.157Z"/>
                                <path fill="url(#e)" d="M13.467 33.6a.817.817 0 0 1-.742-1.05V12.6a.817.817 0 1 1 1.584 0v19.95a.817.817 0 0 1-.842 1.05Z"/>
                                </svg>
                            </div>
                            <div class="col-md-3">
                                <input type="name" class="form-control mb-3" placeholder="Delhi">
                                <input type="name" class="form-control" placeholder="Mumbai">
                            </div>
                            <div class="col-md-3">
                                <div class="border border-12 p-2 h-100">
                                    <p class="fs-18 mb-2">1 Room</p>
                                    <div class="d-flex gap-2">
                                        <select name="" class="form-select" id="">
                                        <option value=""><span class="fs-18">2</span> Adult</option>
                                        </select>
                                        <select name="" class="form-select" id="">
                                        <option value=""><span class="fs-18">1</span> Children</option>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-3"></div>
                            <div class="col-md-2 my-auto">
                                <div class="text-center">
                                    <button class="btn bUtn">
                                        <svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                        <path d="M21 21L17 17M19 11C19 13.1217 18.1571 15.1566 16.6569 16.6569C15.1566 18.1571 13.1217 19 11 19C8.87827 19 6.84344 18.1571 5.34315 16.6569C3.84285 15.1566 3 13.1217 3 11C3 8.87827 3.84285 6.84344 5.34315 5.34315C6.84344 3.84285 8.87827 3 11 3C13.1217 3 15.1566 3.84285 16.6569 5.34315C18.1571 6.84344 19 8.87827 19 11Z" stroke="white" stroke-width="1.5" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
                                        </svg> Search Hotel
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
    <div class="bg-white">
        <div class="customDiv py-4">
            <h2>Partner With Us</h2>
            <p class="fs-24">Unlock Earning Potential</p>
            <div class="row">
                <div class="col-md-3">
                    <div class="border-12 p-3 h-100 my-auto" data-bs-toggle="modal" data-bs-target="#admin" style="background: #E0EFFF;">
                        <p class="fs-20 fw600 text-center">Admin</p>
                        <div class="text-center">
                            <img src="<?php echo base_url(); ?>asset/indeximg/admin.png" class="w-25" alt="">
                        </div>
                        <div class="partnerBG">
                            <ul>
                                <li><span class="fw500">Unlimited</span> (UTI Revamp ID, Super Distributer, Retailer & Whitelable)</li>
                                <li><span class="fw500">Tour &and Travel facilities</span> (Flight, Hotel Bus Booking)</li>
                                <li><span class="fw500">Create Your own Admin Panel</span></li>
                            </ul>
                        </div>
                        <div class="text-center mt-3">
                            <button class="btn bUtn w-100 py-2 fs-18 fw600">Join Now ₹2,999</button>
                        </div>
                    </div>
                </div>
                <div class="col-md-9 row mx-0 gy-2">
                    <div class="col-md-6 px0">
                        <div class="border-12 p-3 dflex" data-bs-toggle="modal" data-bs-target="#superDistributor" style="background: #D5FFEE;">
                            <div class="col-md-5 text-center">
                                <img src="<?php echo base_url(); ?>asset/indeximg/sd.png" class="w-100" alt="">
                                <button class="btn bUtn fw600">Join Now</button>
                            </div>
                            <div class="col-md-7">
                                <p class="fs-20 fw600 text-center">
                                    Super Distributer &nbsp;
                                    <span>₹499</span>
                                </p>
                                <div class="partnerBG">
                                    <ul class="fs-13 mb-0">
                                        <li><span class="fw500">Unlimited </span>(UTI Revamp ID, Super Distributer, Retailer & Whitelable) </li>
                                        <li><span class="fw500">Tour &and Travel facilities </span>(Flight, Hotel Bus Booking) </li>
                                        <li><span class="fw500">Use Mobile Application</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 px0">
                        <div class="border-12 p-3 dflex" data-bs-toggle="modal" data-bs-target="#retailer" style="background: #FFEFE0;">
                            <div class="col-md-5 text-center">
                                <img src="<?php echo base_url(); ?>asset/indeximg/retailer.png" class="w-75" alt="">
                                <button class="btn bUtn fw600">Join Now</button>
                            </div>
                            <div class="col-md-7">
                                <p class="fs-20 fw600 d-flex justify-content-between text-center">
                                    Retailer &nbsp;
                                    <span>₹299</span>
                                </p>
                                <div class="partnerBG">
                                    <ul class="fs-13 mb-0">
                                        <li><span class="fw500">Unlimited </span>(UTI Revamp ID, Super Distributer, Retailer & Whitelable) </li>
                                        <li><span class="fw500">Tour &and Travel facilities </span>(Flight, Hotel Bus Booking) </li>
                                        <li><span class="fw500">Use Mobile Application</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 px0">
                        <div class="border-12 p-3 dflex" data-bs-toggle="modal" data-bs-target="#distributor" style="background: #FFF5D4;">
                            <div class="col-md-5 text-center">
                                <img src="<?php echo base_url(); ?>asset/indeximg/distributor.png" class="w-100" alt="">
                                <button class="btn bUtn fw600">Join Now</button>
                            </div>
                            <div class="col-md-7">
                                <p class="fs-20 fw600 d-flex justify-content-between text-center">
                                    Distributer &nbsp;
                                    <span>₹499</span>
                                </p>
                                <div class="partnerBG">
                                    <ul class="fs-13 mb-0">
                                        <li><span class="fw500">Unlimited </span>(UTI Revamp ID, Super Distributer, Retailer & Whitelable) </li>
                                        <li><span class="fw500">Tour &and Travel facilities </span>(Flight, Hotel Bus Booking) </li>
                                        <li><span class="fw500">Use Mobile Application</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-6 px0">
                        <div class="border-12 p-3 dflex" data-bs-toggle="modal" data-bs-target="#revamp" style="background: #E9E3FF;">
                            <div class="col-md-5 text-center">
                                <img src="<?php echo base_url(); ?>asset/indeximg/rewamp.png" class="w-100" alt="">
                                <button class="btn bUtn fw600">Join Now</button>
                            </div>
                            <div class="col-md-7">
                                <p class="fs-20 fw600 d-flex justify-content-between text-center">
                                    Rewamp &nbsp;
                                    <span>₹499</span>
                                </p>
                                <div class="partnerBG">
                                    <ul class="fs-13 mb-0">
                                        <li>
                                            <span class="fw500">Unlimited </span>
                                            (UTI Revamp ID, Super Distributer, Retailer & Whitelable) 
                                        </li>
                                        <li>
                                            <span class="fw500">
                                                Tour &and Travel facilities         </span>(Flight, Hotel Bus Booking) </li>
                                        <li>
                                            <span class="fw500">Use Mobile Application</span></li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>

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

    <div class="customDiv mt-4 bg-white p-3 py-4 border-28 mob-hide">
            <ul class="nav nav-pills service-Nav justify-content-between mx-auto">
                <li class="nav-item my-auto">
                <a class="nav-link active" data-bs-toggle="pill" href="#home">
                    <svg xmlns="https://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
                        <path d="M20.75 6.5H17C17 5.30653 16.5259 4.16193 15.682 3.31802C14.8381 2.47411 13.6935 2 12.5 2C11.3065 2 10.1619 2.47411 9.31802 3.31802C8.47411 4.16193 8 5.30653 8 6.5H4.25C3.85218 6.5 3.47064 6.65804 3.18934 6.93934C2.90804 7.22064 2.75 7.60218 2.75 8V19.25C2.75 19.6478 2.90804 20.0294 3.18934 20.3107C3.47064 20.592 3.85218 20.75 4.25 20.75H20.75C21.1478 20.75 21.5294 20.592 21.8107 20.3107C22.092 20.0294 22.25 19.6478 22.25 19.25V8C22.25 7.60218 22.092 7.22064 21.8107 6.93934C21.5294 6.65804 21.1478 6.5 20.75 6.5ZM12.5 3.5C13.2956 3.5 14.0587 3.81607 14.6213 4.37868C15.1839 4.94129 15.5 5.70435 15.5 6.5H9.5C9.5 5.70435 9.81607 4.94129 10.3787 4.37868C10.9413 3.81607 11.7044 3.5 12.5 3.5ZM20.75 19.25H4.25V8H20.75V19.25Z" fill="white"></path>
                      </svg>
                    Service</a>
                </li>
                <li class="nav-item my-auto">
                <a class="nav-link" data-bs-toggle="pill" href="#menu1"><svg xmlns="https://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25" fill="none">
                    <path d="M22.5 22.8248H2.5M20.5 22.8248V11.8248M4.5 22.8248V11.8248" stroke="white" stroke-width="1.5" stroke-linecap="round"></path>
                    <path d="M17.0281 2.82483H7.97207C6.76907 2.82483 6.16807 2.82483 5.68507 3.12383C5.20107 3.42183 4.93207 3.95983 4.39507 5.03583L2.99007 8.58483C2.66607 9.40483 2.38207 10.3708 2.92807 11.0638C3.18529 11.3909 3.53809 11.6295 3.93734 11.7466C4.33659 11.8636 4.76241 11.8533 5.15549 11.7169C5.54857 11.5806 5.88935 11.325 6.13036 10.9859C6.37136 10.6468 6.5006 10.2409 6.50007 9.82483C6.50007 10.3553 6.71078 10.864 7.08586 11.239C7.46093 11.6141 7.96964 11.8248 8.50007 11.8248C9.0305 11.8248 9.53921 11.6141 9.91428 11.239C10.2894 10.864 10.5001 10.3553 10.5001 9.82483C10.5001 10.3553 10.7108 10.864 11.0859 11.239C11.4609 11.6141 11.9696 11.8248 12.5001 11.8248C13.0305 11.8248 13.5392 11.6141 13.9143 11.239C14.2894 10.864 14.5001 10.3553 14.5001 9.82483C14.5001 10.3553 14.7108 10.864 15.0859 11.239C15.4609 11.6141 15.9696 11.8248 16.5001 11.8248C17.0305 11.8248 17.5392 11.6141 17.9143 11.239C18.2894 10.864 18.5001 10.3553 18.5001 9.82483C18.5 10.2406 18.6295 10.646 18.8705 10.9847C19.1116 11.3234 19.4522 11.5786 19.845 11.7148C20.2377 11.8509 20.6632 11.8613 21.0622 11.7445C21.4611 11.6276 21.8138 11.3894 22.0711 11.0628C22.6171 10.3698 22.3331 9.40383 22.0091 8.58383L20.6051 5.03583C20.0681 3.95983 19.7991 3.42183 19.3151 3.12383C18.8321 2.82483 18.2311 2.82483 17.0281 2.82483Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"></path>
                    <path d="M10 22.3248V19.3248C10 18.3898 10 17.9228 10.201 17.5748C10.3326 17.3468 10.522 17.1575 10.75 17.0258C11.098 16.8248 11.565 16.8248 12.5 16.8248C13.435 16.8248 13.902 16.8248 14.25 17.0258C14.478 17.1575 14.6674 17.3468 14.799 17.5748C15 17.9228 15 18.3898 15 19.3248V22.3248" stroke="white" stroke-width="1.5" stroke-linecap="round"></path>
                  </svg> Shop's</a>
                </li>
            </ul>
        <br>
        <div class="tab-content mob-hide">
            <div class="tab-pane container active" id="home">
                <div class="row">
                    <div class="col-md-3">
                        <a href="https://developerchowk.co.in/GoteJaga/cab.html" target="_blank">
                            <div class="service1 border-28">
                                <div class="pt-3 px-4">
                                    <h4>Cab</h4>
                                    <p class="mob-hide">Wherever you need to go, we’ll get you there.</p>
                                </div>
                                <img src="<?php echo base_url(); ?>asset/indeximg/cab.png" alt="" class="w-100">
                                <div class="px-3 mob-hide">
                                    <button class="btn bUtn w-100 py-2 fs-18 fw600">Book a Ride Now</button>
                                </div>
                            </div>
                        </a>
                    </div>
                    <div class="col-md-9">
                        <div class="row gy-3">
                            <div class="col-md-4">
                                <a href="https://developerchowk.co.in/GoteJaga/matrimony/indexbeforelog.html" target="_blank">
                                    <div class="ser service2">
                                        <h5>Matrimony</h5>
                                        <div class="imgDiv">
                                            <img src="<?php echo base_url(); ?>asset/indeximg/matrimony.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="https://developerchowk.co.in/GoteJaga/travel/flightsearch.html" target="_blank">
                                    <div class="ser service3">
                                        <h5>Travel</h5>
                                        <div class="imgDiv">
                                            <img src="<?php echo base_url(); ?>asset/indeximg/travel.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="https://developerchowk.co.in/GoteJaga/onlineTuition/student/" target="_blank">
                                    <div class="ser service4">
                                        <h5>Study</h5>
                                        <div class="imgDiv">
                                            <img src="<?php echo base_url(); ?>asset/indeximg/ser4.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <!-- <a href="astrology/index.html"> -->
                                    <div class="ser service5">
                                        <h5>Astrology</h5>
                                        <div class="imgDiv">
                                            <img src="<?php echo base_url(); ?>asset/indeximg/study.png" alt="">
                                        </div>
                                    </div>
                                <!-- </a> -->
                            </div>
                            <div class="col-md-8">
                                <a href="https://developerchowk.co.in/GoteJaga/doctor/" target="_blank">
                                    <div class="ser service6">
                                        <h5>Health</h5>
                                        <p class="small mb-0">Solutions for all your<br> health needs.</p>
                                        <div class="imgDiv">
                                            <img src="<?php echo base_url(); ?>asset/indeximg/health.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-8">
                                <a href="/Wl_index/jobkaro/">
                                    <div class="ser service7">
                                        <h5>Job</h5>
                                        <p class="small mb-0">Find the Perfect Match for Your <br>Career or Company.</p>
                                        <div class="imgDiv">
                                            <img src="<?php echo base_url(); ?>asset/indeximg/job.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                            <div class="col-md-4">
                                <a href="https://developerchowk.co.in/GoteJaga/services/" target="_blank">
                                    <div class="ser service8">
                                        <h5>Repair</h5>
                                        <div class="imgDiv">
                                            <img src="<?php echo base_url(); ?>asset/indeximg/repair.png" alt="">
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="tab-pane container fade" id="menu1">
                <div class="row mx-0 gy-3">
                    <div class="col-md-3">
                        <div class="shop1 border-28">
                            <div class="pt-3 px-4">
                                <h4>Fruits &amp; Vegetable's</h4>
                                <p>Pick from a variety of seasonal fruits<br> and veggies</p>
                            </div>
                            <div class="text-center">
                                <img src="<?php echo base_url(); ?>asset/indeximg/fruit.png" alt="">
                            </div>
                            <div class="px-3">
                                <button class="btn bUtn w-100">Shop Now</button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="row gy-3">
                            <div class="col-md-4">
                                <div class="shop shop2">
                                    <h5>Grocery</h5>
                                    <div class="imgDiv">
                                        <img src="	https://developerchowk.co.in/GoteJaga/img/shop2.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="shop shop3">
                                    <h5>Cloths &amp; Fashion</h5>
                                    <div class="imgDiv">
                                        <img src="<?php echo base_url(); ?>asset/indeximg/Cloths.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="shop shop4">
                                    <h5>Paints</h5>
                                    <div class="imgDiv">
                                        <img src="<?php echo base_url(); ?>asset/indeximg/Paints.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="shop shop5">
                                    <h5>Electronics</h5>
                                    <div class="imgDiv">
                                        <img src="<?php echo base_url(); ?>asset/indeximg/Electronics.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="shop shop6">
                                    <h5>Footwear</h5>
                                    <p class="mb-0 small">Find Your Perfect Fit, Walk<br> with Confidence!</p>
                                    <div class="imgDiv">
                                        <img src="<?php echo base_url(); ?>asset/indeximg/Footwear.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="shop shop7">
                                    <h5>Food</h5>
                                    <p class="small mb-0">Healthy, Tasty, and Right at<br> Your Door</p>
                                    <div class="imgDiv">
                                        <img src="https://developerchowk.co.in/GoteJaga/img/shop7.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="shop shop8">
                                    <h5>Souvenir&nbsp;&amp;&nbsp;Craft</h5>
                                    <div class="imgDiv">
                                        <img src="https://developerchowk.co.in/GoteJaga/img/shop8.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
        
                    <div class="col-md-9">
                        <div class="row gy-3">
                            <div class="col-md-4">
                                <div class="shop shop2">
                                    <h5>Books &amp; <br>Stationery</h5>
                                    <div class="imgDiv">
                                        <img src="https://developerchowk.co.in/GoteJaga/img/shop9.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="shop shop3">
                                    <h5>Toys &amp;<br> Games</h5>
                                    <div class="imgDiv">
                                        <img src="https://developerchowk.co.in/GoteJaga/img/shop10.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="shop shop4">
                                    <h5>Pets</h5>
                                    <div class="imgDiv">
                                        <img src="https://developerchowk.co.in/GoteJaga/img/shop11.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="shop shop5">
                                    <h5>Hardware &amp;<br> Tools</h5>
                                    <div class="imgDiv">
                                        <img src="https://developerchowk.co.in/GoteJaga/img/shop12.png" alt="">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-8">
                                <div class="shop shop6">
                                    <h5>Home &amp; Furniture</h5>
                                    <p class="mb-0 small">Make Your Home <br>a Reflection of You!</p>
                                    <div class="imgDiv">
                                        <img src="https://developerchowk.co.in/GoteJaga/img/shop13.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="shop1 border-28">
                            <div class="pt-3 px-4">
                                <h5>Health &amp; Pharmacy</h5>
                                <p class="small mb-0">Expert Care, Anytime You Need!</p>
                            </div>
                            <div class="text-center">
                                <img src="https://developerchowk.co.in/GoteJaga/img/shop14.png" alt="">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="customDiv mx-auto mt-5">
        <h3 class="fw500">Why Partner with Us </h3>
        <div class="row mt-4">
            <div class="col-md-3 col-6">
                <div class="partnerCrd">
                    <div class="text-center">
                        <img src="<?php echo base_url(); ?>asset/indeximg/part1.png" alt="">
                        <p class="fs-20 fw500 mt-2">Onboarded Shops</p>
                        <p class="fs-14">Local shops are joining our platform to bring groceries, fashion, electronics, and more directly to you. Support your nearby stores while shopping online.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="partnerCrd">
                    <div class="text-center">
                        <img src="<?php echo base_url(); ?>asset/indeximg/part2.png" alt="">
                        <p class="fs-20 fw500 mt-2">All-in-One Services</p>
                        <p class="fs-14">Find what you need—jobs, cab booking, matrimony, astrology, and many more services—brought together on a single platform for your convenience.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="partnerCrd">
                    <div class="text-center">
                        <img src="<?php echo base_url(); ?>asset/indeximg/part3.png" alt="">
                        <p class="fs-20 fw500 mt-2">Travel Bookings</p>
                        <p class="fs-14">From flights and buses to hotels, plan your entire trip in one place. Fast, reliable, and affordable travel made simple.</p>
                    </div>
                </div>
            </div>
            <div class="col-md-3 col-6">
                <div class="partnerCrd">
                    <div class="text-center">
                        <img src="<?php echo base_url(); ?>asset/indeximg/part4.png" alt="">
                        <p class="fs-20 fw500 mt-2">PAN Card</p>
                        <p class="fs-14">It provide tools for tracking application status linking PAN with Aadhaar and updating address details through eKYC</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="customDiv mt-5 mb-3">
        <h2 class="">Explore Product Near You</h2>
        <div class="d-flex gap-2 food-filter-bar mb-2">
            <div class="food-filter-btn active">Recommended</div>
            <div class="food-filter-btn">Junk Food</div>
            <div class="food-filter-btn">Only Veg</div>
            <div class="food-filter-btn">Non-Veg</div>
            <div class="food-filter-btn">Spicy & Fiery </div>
            <div class="food-filter-btn">Street Food</div>
            <div class="food-filter-btn">Full Meals</div>
            <div class="food-filter-btn">Quick Bites</div>
            <div class="food-filter-btn">Beverages</div>
            <div class="food-filter-btn">Drinks</div>
        </div>
    </div>
    <div class="customDiv">
        <div class="owl-carousel owl-theme trendingDish_Slider">
            <div class="owl-item">
                <div class="trendingDish position-relative">
                    <div class="image-div">
                        <img src="<?php echo base_url(); ?>asset/indeximg/trendbg1.png" alt="">
                    </div>
                    <div class="position-absolute text-white" style="bottom: 1rem; left: 0.5rem;">
                        <h6>Indian <br> Chicken Curry </h6>
                        <p class="fs-14 mb-0">4.5 km | ~40 min</p>
                    </div>
                </div>
            </div>
            <div class="owl-item">
                <div class="trendingDish position-relative">
                    <div class="image-div">
                        <img src="<?php echo base_url(); ?>asset/indeximg/trendbg2.png" alt="">
                    </div>
                    <div class="position-absolute text-white" style="bottom: 1rem; left: 0.5rem;">
                        <h6>Indian <br> Chicken Curry </h6>
                        <p class="fs-14 mb-0">4.5 km | ~40 min</p>
                    </div>
                </div>
            </div>
            <div class="owl-item">
                <div class="trendingDish position-relative">
                    <div class="image-div">
                        <img src="<?php echo base_url(); ?>asset/indeximg/trendbg3.png" alt="">
                    </div>
                    <div class="position-absolute text-white" style="bottom: 1rem; left: 0.5rem;">
                        <h6>Indian <br> Chicken Curry </h6>
                        <p class="fs-14 mb-0">4.5 km | ~40 min</p>
                    </div>
                </div>
            </div>
            <div class="owl-item">
                <div class="trendingDish position-relative">
                    <div class="image-div">
                        <img src="<?php echo base_url(); ?>asset/indeximg/trendbg4.png" alt="">
                    </div>
                    <div class="position-absolute text-white" style="bottom: 1rem; left: 0.5rem;">
                        <h6>Indian <br> Chicken Curry </h6>
                        <p class="fs-14 mb-0">4.5 km | ~40 min</p>
                    </div>
                </div>
            </div>
            <div class="owl-item">
                <div class="trendingDish position-relative">
                    <div class="image-div">
                        <img src="<?php echo base_url(); ?>asset/indeximg/trendbg5.png" alt="">
                    </div>
                    <div class="position-absolute text-white" style="bottom: 1rem; left: 0.5rem;">
                        <h6>Indian <br> Chicken Curry </h6>
                        <p class="fs-14 mb-0">4.5 km | ~40 min</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="customDiv mt-4">
            <div class="review-section">
                <div class="row align-items-start">
                    
                    <div class="col-md-3 d-flex flex-column justify-content-between">
                    <div>
                        <h2 class="review-heading">Everything You Need, Just a Click Away</h2>
                    </div>
                    <div class="mt-4 d-flex">
                        <button class="arrow-btn" id="prevBtn">❮</button>
                        <button class="arrow-btn" id="nextBtn">❯</button>
                    </div>
                    </div>

                    <div class="col-md-9">
                    <div class="slider" id="sliderBox">
                        <div class="slider-track" id="sliderTrack">
                        
                        <div class="review-card">
                            <p class="review-author mb-1">Job</p>
                            <p>Find and apply for jobs around your location with quick and easy applications.</p>
                            <div class="text-center">
                                <img src="<?php echo base_url(); ?>asset/indeximg/ser1.png" alt="">
                            </div>
                            <button class="btn bUtn w-100">Explore Jobs</button>
                        </div>

                        <div class="review-card">
                            <p class="review-author mb-1">Cab</p>
                            <p>Book reliable rides anytime, anywhere with trusted drivers near you.</p>
                            <div class="text-center">
                                <img src="<?php echo base_url(); ?>asset/indeximg/ser2.png" alt="">
                            </div>
                            <button class="btn bUtn w-100">Book Cab</button>
                        </div>

                        <div class="review-card">
                            <p class="review-author mb-1">Astrology</p>
                            <p>Consult expert astrologers for guidance on life, career, and relationships</p>
                            <div class="text-center">
                                <img src="<?php echo base_url(); ?>asset/indeximg/ser3.png" alt="">
                            </div>
                            <button class="btn bUtn w-100">Talk To Astrologers</button>
                        </div>

                        <div class="review-card">
                            <p class="review-author mb-1">Matrimony</p>
                            <p>Connect with verified profiles and find your perfect life partner.</p>
                            <button class="btn bUtn w-100">Find Your Match</button>
                        </div>

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

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

    <div class="container-fluid mt-4 px-0">
        <div id="demo" class="carousel slide banerSlider" data-bs-ride="carousel">
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active" aria-current="true"></button>
                <button type="button" data-bs-target="#demo" data-bs-slide-to="1" class=""></button>
                <button type="button" data-bs-target="#demo" data-bs-slide-to="2" class=""></button>
            </div>
            
            <div class="carousel-inner">
                <div class="carousel-item active">
                    <div class="py-4" style="background-image: url(<?php echo base_url(); ?>asset/indeximg/bnr1.png);">
                        <div class="customDiv mx-auto">
                            <div class="col-md-7 bnrTxt">
                                <p class="fs-22 fw500 mb-2">
                                    Compare fares, choose your perfect timing, and travel with top airlines — all in one place.
                                </p>
                                <p>Find the best flight deals for domestic and international travel. We offer real-time fare comparisons, easy booking, and instant confirmation. Whether you're planning a business trip or a family vacation, book with us for a hassle-free flying experience</p>
                                <button class="btn bUtn round12 fs-18">Search Flight</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="py-4" style="background-image: url(<?php echo base_url(); ?>asset/indeximg/bnr2.png);">
                        <div class="customDiv mx-auto">
                            <div class="col-md-7 bnrTxt">
                                <p class="fs-22 fw500 mb-2">
                                    Compare fares, choose your perfect timing, and travel with top airlines — all in one place.
                                </p>
                                <p>Choose from trusted operators, select your preferred seat, and travel comfortably with instant ticket confirmation. Simple, secure, and swift bus booking.</p>
                                <button class="btn bUtn round12 fs-18">Search Bus</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="carousel-item">
                    <div class="py-4" style="background-image: url(<?php echo base_url(); ?>asset/indeximg/bnr3.png);">
                        <div class="customDiv mx-auto">
                            <div class="col-md-7 bnrTxt">
                                <p class="fs-22 fw500 mb-2">
                                    Flexible booking, trusted properties, and the comfort you deserve.
                                </p>
                                <p>Search thousands of stays — from cozy budget rooms to luxurious suites. Compare amenities, check reviews, and book the perfect hotel for your trip.</p>
                                <button class="btn bUtn round12 fs-18">Search Hotel</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="mt-5 customDiv position-relative">
        <div class="border-18 downloadApp">
            <div class="row px-4">
                <div class="col-md-5 my-auto">
                    <h2 class="fw-normal" style="line-height: 1.3;">Most Probably You are getting<br> <span class="txtUnderline">Best App </span> Ever</h2>
                    <p class="fs-18 mb-0 mt-4">To download the app, Just Click On Download Button Or Scan OR Code using your smartphone.</p>
                    <button class="btn bUtn fs-18 round12 py-2 px-4 mt-3 fw500">Download Now</button>
                </div>
                <div class="col-md-4"></div>
                <div class="col-md-3">
                    <img src="<?php echo base_url(); ?>asset/indeximg/qrCode.png" class="w-100" alt="">
                    <p class="fw600 mb-0 text-center">Scan to Get Started!</p>
                </div>
            </div>
        </div>
    </div>

    <div class="bg-white pt-5 pb-3">
        <div class="customDiv">
            <div class="row">
                <div class="col-md-4">
                    <p class="comName mb-1">BITS PANINDIA</p>
                    <p class="fs-18">BITSPAN INDIA has been authorized to apply PAN CARD across India through our Super Distributor ,Distributor &amp; retailer network</p>
                    <div class="col-md-10 d-flex justify-content-between">
                    <a href="">
                        <svg xmlns="https://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
                            <rect width="34" height="34" rx="17" fill="white"></rect>
                            <path d="M29 17.0301C29 10.3895 23.624 5 17 5C10.376 5 5 10.3895 5 17.0301C5 22.8526 9.128 27.7008 14.6 28.8195V20.6391H12.2V17.0301H14.6V14.0226C14.6 11.7008 16.484 9.81203 18.8 9.81203H21.8V13.4211H19.4C18.74 13.4211 18.2 13.9624 18.2 14.6241V17.0301H21.8V20.6391H18.2V29C24.26 28.3985 29 23.2737 29 17.0301Z" fill="#3A8DFF"></path>
                        </svg>
                    </a>
                    <a href="">
                        <svg xmlns="https://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
                            <rect width="34" height="34" rx="17" fill="white"></rect>
                            <path d="M26.3333 5C27.0406 5 27.7189 5.28095 28.219 5.78105C28.719 6.28115 29 6.95942 29 7.66667V26.3333C29 27.0406 28.719 27.7189 28.219 28.219C27.7189 28.719 27.0406 29 26.3333 29H7.66667C6.95942 29 6.28115 28.719 5.78105 28.219C5.28095 27.7189 5 27.0406 5 26.3333V7.66667C5 6.95942 5.28095 6.28115 5.78105 5.78105C6.28115 5.28095 6.95942 5 7.66667 5H26.3333ZM25.6667 25.6667V18.6C25.6667 17.4472 25.2087 16.3416 24.3936 15.5264C23.5784 14.7113 22.4728 14.2533 21.32 14.2533C20.1867 14.2533 18.8667 14.9467 18.2267 15.9867V14.5067H14.5067V25.6667H18.2267V19.0933C18.2267 18.0667 19.0533 17.2267 20.08 17.2267C20.5751 17.2267 21.0499 17.4233 21.3999 17.7734C21.75 18.1235 21.9467 18.5983 21.9467 19.0933V25.6667H25.6667ZM10.1733 12.4133C10.7674 12.4133 11.3372 12.1773 11.7573 11.7573C12.1773 11.3372 12.4133 10.7674 12.4133 10.1733C12.4133 8.93333 11.4133 7.92 10.1733 7.92C9.57571 7.92 9.00257 8.1574 8.57999 8.57999C8.1574 9.00257 7.92 9.57571 7.92 10.1733C7.92 11.4133 8.93333 12.4133 10.1733 12.4133ZM12.0267 25.6667V14.5067H8.33333V25.6667H12.0267Z" fill="#3A8DFF"></path>
                        </svg>
                    </a>
                    <a href="">
                        <svg xmlns="https://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
                            <rect width="34" height="34" rx="17" fill="white"></rect>
                            <mask id="mask0_8028_1326" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="5" width="24" height="24">
                                <path d="M5 5H29V29H5V5Z" fill="white"></path>
                            </mask>
                            <g mask="url(#mask0_8028_1326)">
                                <path d="M23.9 6.125H27.5806L19.5406 15.3376L29 27.8759H21.5943L15.7897 20.273L9.15543 27.8759H5.47143L14.0703 18.0187L5 6.12671H12.5943L17.8331 13.0747L23.9 6.125ZM22.6057 25.6679H24.6457L11.48 8.21814H9.29257L22.6057 25.6679Z" fill="#3A8DFF"></path>
                            </g>
                        </svg>
                    </a>
                    <a href="">
                        <svg xmlns="https://www.w3.org/2000/svg" width="34" height="34" viewBox="0 0 34 34" fill="none">
                            <rect width="34" height="34" rx="17" fill="white"></rect>
                            <path d="M11.96 5H22.04C25.88 5 29 8.12 29 11.96V22.04C29 23.8859 28.2667 25.6562 26.9615 26.9615C25.6562 28.2667 23.8859 29 22.04 29H11.96C8.12 29 5 25.88 5 22.04V11.96C5 10.1141 5.73328 8.34379 7.03854 7.03854C8.34379 5.73328 10.1141 5 11.96 5ZM11.72 7.4C10.5743 7.4 9.47546 7.85514 8.6653 8.6653C7.85514 9.47546 7.4 10.5743 7.4 11.72V22.28C7.4 24.668 9.332 26.6 11.72 26.6H22.28C23.4257 26.6 24.5245 26.1449 25.3347 25.3347C26.1449 24.5245 26.6 23.4257 26.6 22.28V11.72C26.6 9.332 24.668 7.4 22.28 7.4H11.72ZM23.3 9.2C23.6978 9.2 24.0794 9.35804 24.3607 9.63934C24.642 9.92064 24.8 10.3022 24.8 10.7C24.8 11.0978 24.642 11.4794 24.3607 11.7607C24.0794 12.042 23.6978 12.2 23.3 12.2C22.9022 12.2 22.5206 12.042 22.2393 11.7607C21.958 11.4794 21.8 11.0978 21.8 10.7C21.8 10.3022 21.958 9.92064 22.2393 9.63934C22.5206 9.35804 22.9022 9.2 23.3 9.2ZM17 11C18.5913 11 20.1174 11.6321 21.2426 12.7574C22.3679 13.8826 23 15.4087 23 17C23 18.5913 22.3679 20.1174 21.2426 21.2426C20.1174 22.3679 18.5913 23 17 23C15.4087 23 13.8826 22.3679 12.7574 21.2426C11.6321 20.1174 11 18.5913 11 17C11 15.4087 11.6321 13.8826 12.7574 12.7574C13.8826 11.6321 15.4087 11 17 11ZM17 13.4C16.0452 13.4 15.1295 13.7793 14.4544 14.4544C13.7793 15.1295 13.4 16.0452 13.4 17C13.4 17.9548 13.7793 18.8705 14.4544 19.5456C15.1295 20.2207 16.0452 20.6 17 20.6C17.9548 20.6 18.8705 20.2207 19.5456 19.5456C20.2207 18.8705 20.6 17.9548 20.6 17C20.6 16.0452 20.2207 15.1295 19.5456 14.4544C18.8705 13.7793 17.9548 13.4 17 13.4Z" fill="#3A8DFF"></path>
                        </svg>
                    </a>
                    </div>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-2">
                    <div>
                        <h4>Useful Links</h4>
                        <div class="d-grid gap-2">
                            <a href="" class="footlink">About </a>
                            <a href="" class="footlink">Book Hotel</a>
                            <a href="" class="footlink">Book Flight</a>
                            <a href="" class="footlink">Book Bus</a>
                            <a href="" class="footlink">Our Services </a>
                        </div>
                    </div>
                </div>
                <div class="col-md-1"></div>
                <div class="col-md-4 py-2">
                    <div class="bg-white border-12 border p-3">
                        <input type="text" class="form-control mb-3" placeholder="Your Name">
                        <input type="text" class="form-control mb-3" placeholder="Your Email">
                        <input type="text" class="form-control mb-3" placeholder="Your Massage">
                        <div class="text-center">
                            <button class="btn bUtn py-2 px-4 round14">Submit</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mob-hide">
                <div class="d-flex justify-content-end mt-5">
                    <div class="col-md-12">
                        <div class="d-flex gap-3 justify-content-between">
                        <p class="fs-12 mb-0">© 2025 BITS PANINDIA. All rights reserved.</p>
                        <a href="" class="text-dark">
                            <svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path fill-rule="evenodd" clip-rule="evenodd" d="M11.262 22.134C11.262 22.134 4 16.018 4 10C4 7.87827 4.84285 5.84344 6.34315 4.34315C7.84344 2.84285 9.87827 2 12 2C14.1217 2 16.1566 2.84285 17.6569 4.34315C19.1571 5.84344 20 7.87827 20 10C20 16.018 12.738 22.134 12.738 22.134C12.334 22.506 11.669 22.502 11.262 22.134ZM12 13.5C12.4596 13.5 12.9148 13.4095 13.3394 13.2336C13.764 13.0577 14.1499 12.7999 14.4749 12.4749C14.7999 12.1499 15.0577 11.764 15.2336 11.3394C15.4095 10.9148 15.5 10.4596 15.5 10C15.5 9.54037 15.4095 9.08525 15.2336 8.66061C15.0577 8.23597 14.7999 7.85013 14.4749 7.52513C14.1499 7.20012 13.764 6.94231 13.3394 6.76642C12.9148 6.59053 12.4596 6.5 12 6.5C11.0717 6.5 10.1815 6.86875 9.52513 7.52513C8.86875 8.1815 8.5 9.07174 8.5 10C8.5 10.9283 8.86875 11.8185 9.52513 12.4749C10.1815 13.1313 11.0717 13.5 12 13.5Z" fill="#111"></path>
                            </svg>
                            Gurugram, Delhi NCR, 122003
                        </a>
                        <a href="" class="text-dark">
                            <svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M19.95 21C17.8667 21 15.8083 20.546 13.775 19.638C11.7417 18.73 9.89167 17.4423 8.225 15.775C6.55833 14.1077 5.271 12.2577 4.363 10.225C3.455 8.19233 3.00067 6.134 3 4.05C3 3.75 3.1 3.5 3.3 3.3C3.5 3.1 3.75 3 4.05 3H8.1C8.33333 3 8.54167 3.07933 8.725 3.238C8.90833 3.39667 9.01667 3.584 9.05 3.8L9.7 7.3C9.73333 7.56667 9.725 7.79167 9.675 7.975C9.625 8.15833 9.53333 8.31667 9.4 8.45L6.975 10.9C7.30833 11.5167 7.704 12.1123 8.162 12.687C8.62 13.2617 9.12433 13.816 9.675 14.35C10.1917 14.8667 10.7333 15.346 11.3 15.788C11.8667 16.23 12.4667 16.634 13.1 17L15.45 14.65C15.6 14.5 15.796 14.3877 16.038 14.313C16.28 14.2383 16.5173 14.2173 16.75 14.25L20.2 14.95C20.4333 15.0167 20.625 15.1377 20.775 15.313C20.925 15.4883 21 15.684 21 15.9V19.95C21 20.25 20.9 20.5 20.7 20.7C20.5 20.9 20.25 21 19.95 21Z" fill="#111"></path>
                            </svg>
                            9911306866
                        </a>
                        <a href="" class="text-dark">
                            <svg xmlns="https://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                                <path d="M4 20C3.45 20 2.97933 19.8043 2.588 19.413C2.19667 19.0217 2.00067 18.5507 2 18V6C2 5.45 2.196 4.97933 2.588 4.588C2.98 4.19667 3.45067 4.00067 4 4H20C20.55 4 21.021 4.196 21.413 4.588C21.805 4.98 22.0007 5.45067 22 6V18C22 18.55 21.8043 19.021 21.413 19.413C21.0217 19.805 20.5507 20.0007 20 20H4ZM12 12.825C12.0833 12.825 12.171 12.8123 12.263 12.787C12.355 12.7617 12.4423 12.7243 12.525 12.675L19.6 8.25C19.7333 8.16667 19.8333 8.06267 19.9 7.938C19.9667 7.81333 20 7.67567 20 7.525C20 7.19167 19.8583 6.94167 19.575 6.775C19.2917 6.60833 19 6.61667 18.7 6.8L12 11L5.3 6.8C5 6.61667 4.70833 6.61267 4.425 6.788C4.14167 6.96333 4 7.209 4 7.525C4 7.69167 4.03333 7.83767 4.1 7.963C4.16667 8.08833 4.26667 8.184 4.4 8.25L11.475 12.675C11.5583 12.725 11.646 12.7627 11.738 12.788C11.83 12.8133 11.9173 12.8257 12 12.825Z" fill="#111"></path>
                            </svg>
                            support@bitspanindia.com
                        </a>
                        <a href="" class="text-dark">
                        Privacy Policy | Terms of Service
                        </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
  

    <script>
        $(document).ready(function() {
        if ($('.trendingDish_Slider').length) {
            var viewedSlider = $('.trendingDish_Slider');

            viewedSlider.owlCarousel({
                loop: true,
                margin: 10,
                autoplay: false, // Disable auto-slide
                nav: false,
                dots: false,
                responsive: {
                    0: { items: 2 },
                    575: { items: 2 },
                    768: { items: 2 },
                    991: { items: 3 },
                    1199: { items: 7 } // Set 7 items per row for large screens
                }
            });
        }
    });

    </script>

    <script>
    const sliderTrack = document.getElementById("sliderTrack");
    const prevBtn = document.getElementById("prevBtn");
    const nextBtn = document.getElementById("nextBtn");

    let currentIndex = 0;

    nextBtn.addEventListener("click", () => {
        if (currentIndex < sliderTrack.children.length - 1) {
        currentIndex++;
        updateSlider();
        }
    });

    prevBtn.addEventListener("click", () => {
        if (currentIndex > 0) {
        currentIndex--;
        updateSlider();
        }
    });

    function updateSlider() {
        const cardWidth = sliderTrack.children[0].offsetWidth + 20; // card + gap
        sliderTrack.style.transform = `translateX(-${currentIndex * cardWidth}px)`;
    }
    </script>

   <script>
    // ✅ Sync radio with active tab
    function updateRadios() {
        document.querySelectorAll('.flightTabs .nav-link').forEach(link => {
        const radio = link.querySelector('.form-check-input');
        radio.checked = link.classList.contains('active');
        });
    }

    // ✅ Initial sync
    updateRadios();

    // ✅ Fix toggle issue
    document.querySelectorAll('.flightTabs .nav-link').forEach(link => {
        link.addEventListener('click', function (e) {
        // force tab show on click (even if label/radio was clicked)
        const tabTrigger = new bootstrap.Tab(link);
        tabTrigger.show();
        });
    });

    // ✅ Update radio buttons when tab changes
    document.querySelectorAll('.flightTabs .nav-link').forEach(link => {
        link.addEventListener('shown.bs.tab', updateRadios);
    });
    </script>
    
    <script>
      const megaTrigger = document.getElementById("megaTrigger");
      const megaMenu = document.getElementById("megaMenu");
      const shopLink = megaTrigger.querySelector(".shop-link");
      const serviceLink = megaTrigger.querySelector(".service-link");
      const shopCol = megaMenu.querySelector(".shops-col");
      const serviceCol = megaMenu.querySelector(".services-col");
    
      // open menu
      megaTrigger.addEventListener("mouseenter", () => {
        megaMenu.classList.add("active");
      });
    
      // close menu
      megaTrigger.addEventListener("mouseleave", () => {
        megaMenu.classList.remove("active");
      });
    
      // hover shops → shops on right
      shopLink.addEventListener("mouseenter", () => {
        shopCol.style.order = "1";
        serviceCol.style.order = "2";
      });
    
      // hover services → services on right
      serviceLink.addEventListener("mouseenter", () => {
        serviceCol.style.order = "1";
        shopCol.style.order = "2";
      });
    </script>
    

<script>

let csrfName = document.getElementById("csrf_name").value;
let csrfHash = document.getElementById("csrf_hash").value;


let phone = "";
let otpValid = false;  
let otpTimer = null;

function startOTPTimer(){
   let time = 30;
   otpValid = true;

   clearInterval(window.otpTimer);

   $("#resendBtn").hide();
   $("#verify-OTP").prop("disabled", false);
   $("#otpTimer").html("Resend OTP in <b>00:"+time+"</b>");

   window.otpTimer = setInterval(() => {

      time--;
      $("#otpTimer b").text("00:" + (time < 10 ? "0" + time : time));

      if(time <= 0){
         clearInterval(window.otpTimer);
         otpValid = false;
         $("#otpTimer").text("OTP expired");
         $("#resendBtn").show();
         $("#verify-OTP").prop("disabled", true);

         let formData = new FormData();
         formData.append("phone", phone);
         formData.append(csrfName, csrfHash);

         fetch("<?= base_url('login/expire-otp')?>",{
            method:"POST",
            body: formData
         })
         .then(r => r.json())
         .then(res => {
      csrfName = res.csrf_name;
csrfHash = res.csrf_hash;

document.getElementById("csrf_name").value = csrfName;
document.getElementById("csrf_hash").value = csrfHash;
         });
      }

   }, 1000);
}   // ✅ THIS CLOSING BRACE WAS MISSING


/* ------------------ RESEND OTP ------------------ */
$("#resendBtn").click(()=>{

   let formData = new FormData();
   formData.append("phone", phone);
   formData.append(csrfName, csrfHash);

   fetch("<?= base_url('login/send-otp') ?>", {
      method: "POST",
      body: formData
   })
   .then(r => r.json())
   .then(res => {
   
    csrfName = res.csrf_name;
      csrfHash = res.csrf_hash;
      document.getElementById("csrf_name").value = csrfName;
      document.getElementById("csrf_hash").value = csrfHash;
   
 
      if(res.status === "success"){
         $(".otp").val("");
         $(".otp:first").focus();
         
          $("#otpError").text(""); 
         startOTPTimer();
      } else {
         alert(res.message);
      }
   });
});


/* ------------------------ Helpers ------------------------ */
function showError(input, errorBox, msg){
   $(input).addClass("input-error shake");
   $(errorBox).text(msg);
   setTimeout(()=>$(input).removeClass("shake"),400);
}
function clearError(input, errorBox){
   $(input).removeClass("input-error");
   $(errorBox).text("");
}


/* ------------------ OTP Input ------------------ */
$(".otp").attr({ type:"tel", inputmode:"numeric", maxlength:1 });

$(".otp").on("input", function(){
   if(this.value.length === 1){
      $(this).next(".otp").focus();
   }
});

$(".otp").on("keydown", function(e){
   if(e.key==="Backspace" && this.value===""){
      $(this).prev(".otp").focus();
   }
});


/* ------------------ SEND OTP ------------------ */
$("#send-Otp").click(function(){

   phone = $("#phoneInput").val().trim();
   clearError("#phoneInput","#phoneError");

   if(!/^[6-9]\d{9}$/.test(phone)){
      showError("#phoneInput","#phoneError","Enter valid 10 digit mobile number");
      return;
   }

   let formData = new FormData();
   formData.append("phone", phone);
   formData.append(csrfName, csrfHash);

   fetch("<?= base_url('login/send-otp')?>", {
      method: "POST",
      body: formData
   })
   .then(r => r.json())
   .then(res => {
      csrfName = res.csrf_name;
csrfHash = res.csrf_hash;

document.getElementById("csrf_name").value = csrfName;
document.getElementById("csrf_hash").value = csrfHash;

      if(res.status === "success"){
         $(".loginDiv").fadeOut(() => {
            $(".OTPDiv").fadeIn();
            startOTPTimer();
         });
         $(".OTPDiv .text-primary").text("xxxx" + phone.substr(6));
      } else {
         showError("#phoneInput", "#phoneError", res.message);
      }
   });
});


/* ------------------ VERIFY OTP ------------------ */
$("#verify-OTP").click(function(){

   if(!otpValid){
      $("#otpError").text("OTP expired. Please resend.");
      return;
   }

   let otp = "";
   $(".otp").each(function(){ otp += this.value });

   if(otp.length !== 4){
      $("#otpBox").addClass("shake");
      $("#otpError").text("Enter full OTP");
      setTimeout(()=>$("#otpBox").removeClass("shake"),400);
      return;
   }

   let formData = new FormData();
   formData.append("phone", phone);
   formData.append("otp", otp);
   formData.append(csrfName, csrfHash);

   fetch("<?= base_url('login/verify-otp')?>", {
      method: "POST",
      body: formData
   })
   .then(r => r.json())
   .then(res => {
     
      
   csrfName = res.csrf_name;
csrfHash = res.csrf_hash;

document.getElementById("csrf_name").value = csrfName;
document.getElementById("csrf_hash").value = csrfHash;

      if(res.status === "success"){
         if(res.data.user_exist == 1){
            location.reload();
         } else {
            $(".OTPDiv").fadeOut(()=>$(".setPassDiv").fadeIn());
         }
      } else {
         $("#otpError").text(res.message);
      }
   });
});


/* ------------------ SAVE USER ------------------ */
$(".setPassDiv .bUtn").click(function(){

   let name  = $("#nameInput").val().trim();
   let email = $("#passInput").val().trim();

   if(name.length < 3) return;
   if(!/^\S+@\S+\.\S+$/.test(email)) return;

   let formData = new FormData();
   formData.append("name", name);
   formData.append("email", email);
   formData.append("phone", phone);
   formData.append(csrfName, csrfHash);

   fetch("<?= base_url('login/add-user')?>", {
      method: "POST",
      body: formData
   })
   .then(r => r.json())
   .then(res => {
      csrfName = res.csrf_name;
csrfHash = res.csrf_hash;

document.getElementById("csrf_name").value = csrfName;
document.getElementById("csrf_hash").value = csrfHash;
      
    document.getElementById("csrf_hash").value = csrfHash;
      if(res.status === "success") location.reload();
   });
});

</script>



</body>
</html>