bnmbertsurrttrtrtrtrjhjhjjhjhhjhjhjhf'tdfg

hjkhghtjhjjhjhjhjhjjhjhjjhrrtrtoirh bnmbertsurrttrtrtrtrjhjhjjhjhhjhjhjhf'tdfg

@extends('layouts.app')
@section("metaData")
 <title >Travelsangi</title>
 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<meta name="keywords" content="Car and Coach Rental in India" />
<meta name="description" content="Patra Tours and Travels Offers Car and Coach Rental, Online Taxi Booking, Cab Services, Tempo Traveller, Airport transfers, and Railway Station transfer. Best Travel Agent in India" />

@endsection

@section("mainContente") 
   <style type="text/css">
details.readmore {
   padding: 2rem 0rem 3rem;
   border-radius: 15px;
   background-color: white;
   cursor: text;
   position: relative;
}
 details.readmore summary {
   display: -webkit-box;
   pointer-events: none;
   overflow: hidden;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
}
 details.readmore summary:after {
   top: 100%;
    margin-top: -2.5rem;
    display: block;
    cursor: pointer;
    background: #f68a1e;
    color: #fff;
    position: absolute;
    pointer-events: initial;
    /* text-decoration: underline; */
    padding: 2px 5px;
}
 details.readmore:not([open]) summary:after {
   content: attr(data-more);
}
 details.readmore[open] summary {
   -webkit-line-clamp: unset;
}
 details.readmore[open] summary:after {
   content: attr(data-less);
}
.honaine ul li
{
  list-style: none;
  margin-right: 10px;
}

.honaine ul
{
  display: flex;
}
.honaine
{
  padding: 10px 0px;
}
    .pkcg-tb>li.active>a, .pkcg-tb>li.active>a:focus, .pkcg-tb>li.active>a:hover {
    color: #555;
    cursor: default;
    background: linear-gradient(#f85406,#e7861d);
    border: 1px solid #e8841c;
    color: #fff;
}
.pkcg-tb> li.active::after {
    content: "";
    position: absolute;
    left: 45%;
    opacity: 1;
    margin: 0 auto;
    bottom: -29px;
    border: 15px solid transparent;
    border-top-color: transparent;
    border-top-color: transparent;
    border-top-color: #e8841c;
}
.pkcg-tb>li>a {
    position: relative;
    display: block;
    background: #286090;
    padding: 8px 25px;
    margin: 0;
    text-transform: uppercase;
    color: #fff;
    line-height: 21px;
    font-size: 13px;
    letter-spacing: .5px;
}
.all-pkcg {
    border: 1px solid #ccc;
    padding: 24px 20px;
    border-top: none;
    margin-bottom: 20px;
}
.all-pkcg {
    box-shadow: 0px 10px 10px rgba(88, 87, 87, 0.8);
    -webkit-transition: all 200ms ease-in;
    -webkit-box-shadow: 0px 10px 10px rgba(88, 87, 87, 0.8);
    -moz-box-shadow: 0px 10px 10px rgba(88, 87, 87, 0.8);
}
      html{overflow-x:hidden;}
      .bk-enc .banner-search_tab {border: 1px solid #ccc;border-top:none; padding:10px 5px;}
      .search_one.absolute {top: 0px;}
      .pickes-siz{width:150px;}
      .mc-feature{border-top:1px solid #ccc; font-size:14px;}
      .mc-feature img{width:40px; padding:5px; border-radius:5px;}
      .mc-feature .iti-box{margin:10px auto; height:80px;}
      .m-res {padding:0 5px;}
      .bootstrap-select.btn-group .dropdown-menu {
      height: 200px!important;
      }
      .bootstrap-select.btn-group .dropdown-menu.inner {
      max-height: 140px!important;
      }
      .validate {
      color: red;
      font-weight: bold;
      border: 2px solid #152b57;
      border-radius: 15px;
      padding: 5px;
      }
      .inup .showtourist {
      font-size: 14px;
      position: absolute;
      top: -12%;
      left: 83%;
      }
      .selectParent select {
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      width: 100%;
      cursor: pointer;
      height: 35px;
      padding: 5px 5px!important;
      font-size: 14px;
      font-weight: 400;
      color: #333;
      text-align: left;
      background-color: #fff;
      border: 1px solid #adadad;
      border-radius: 4px;
      box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
      transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
      background: #fff url(../images/dropdown.png) no-repeat Right ;
      margin: 0;
      } 
      .slick-prev {left: -40px; }
      .slick-next { right: -40px; }
      .srvcnone { display: none;}
      .destination-text1 { font-size: 15px; padding: 0px 5px; margin-top: -3px; }
      .desti-small { margin-top: 2px; }
      .carousel-inner > .item { height:310px; }
      .tab-content label{font-size:11px; font-family: 'Arial';}
      .why-box strong { color: inherit;}
      p a { color: #ff6c26; text-decoration: none; font-weight: 600;}
      .why-box p a:hover {color:#000;}
      .all-pkcg {
      box-shadow: 0px 10px 10px rgba(88, 87, 87, 0.8);
      -webkit-transition: all 200ms ease-in;
      -webkit-box-shadow: 0px 10px 10px rgba(88, 87, 87, 0.8);
      -moz-box-shadow: 0px 10px 10px rgba(88, 87, 87, 0.8);
      }
      .tab-pane {
      padding:0%;
      font-size: 14px;
      border: 0;
      border-top: 0;
      margin:0;
      float:left;
      width:100%;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      }
      .ratechart table th {
      background: #308fcc;
      padding: 10px;
      border: 1px solid #eee;
      font-size: 12px;
      color: #fff;
      text-align: center;
      vertical-align: middle;
      font-weight: 500;
      }
      .ratechart table strong {
      text-transform: uppercase;
      color: #fff;
      }
      .ratechart table th:first-child {
      background: #308fcc;
      color: #fff;
      text-transform: capitalize;
      font-size: 14px;
      text-align: center;
      padding: 0;
      vertical-align: middle;
      }
      .ratechart table td.tblhead {
      font-size: 18px;
      padding: 6px 6px;
      background: linear-gradient(to right, #ff266d, #f99f49);
      border: 0;
      color: #fff;
      letter-spacing: 1px;
      text-align: center;
      font-weight: 600;
      }
      .ratechart table td {
      background: #fff;
      padding: 1px 6px;
      font-weight: 500;
      color: #000;
      text-align: center;
      font-size: 14px;
      vertical-align: middle;
      }
      .ratechart table td:first-child img {
      width:150px;
      display: block;
      margin: 10px auto;
      padding: 6px;
      border: 1px solid #ccc;
      border-radius: 5px;
      box-shadow: 4px 3px 4px #ccc;
      }
      .ratechart table strong {
      text-transform: uppercase;
      }
      .prc-locl{font-weight:600; font-size:14px;}
      .lol-txt {
      font-size: 15px;
      position: relative;
      top: 30px;
      font-weight: 600;
      color: #1184bb;
      text-align: left;
      }
      .round-wdh{padding-right:0;}
      .round-wdh2{padding-right:0;}
      .round-wdh3{padding-right:0;}
      .round-wdh4{padding-right:0;}
      .round-wdh5{padding-right:0;}
      .round-wdh6{padding-right:0;}
      .input-field .form-control, textarea, input[type="text"], input[type="password"], input[type="datetime"], input[type="datetime-local"], input[type="date"], input[type="month"], input[type="time"], input[type="week"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], input[type="email"], input[type="tel"], input[type="color"], .uneditable-input{
      padding-left: 5px;
      padding-right: 5px;
      }
      table > thead:first-child > tr:first-child > th {
      border: 1px solid #ccc;
      }
      .table-bordered > thead > tr > td, .table-bordered > thead > tr > th
      {
      border-bottom-width:1px;
      }
      /*rwd table css start here*/
      .rwd-table th {
      display: none;
      }
      .rwd-table td {
      display: block;
      }
      .rwd-table td:before {
      content: attr(data-th) "" !important;
      float: left;
      font-size: 12px;
      margin-bottom: 10px;
      position: relative !important;
      top: 0 !important;
      left: 0 !important;
      width: auto !important;
      display: inline-block;
      color: #000;
      clear: both;
      text-align: left;
      }
      .rwd-table {
      color: #333;
      overflow: hidden;
      }
      .rwd-table th,
      .rwd-table td {
      padding: 5px 5px;
      }
      @media screen and (max-width: 768px) {
      .round-wdh{padding-right:15px;}
      .round-wdh2{padding-right:15px;}
      .round-wdh3{padding-right:15px;}
      .round-wdh4{padding-right:15px;}
      .round-wdh5{padding-right:15px;}
      .round-wdh6{padding-right:15px;}
      .ratechart table th {padding:10px 9px;}
      .rwd-table tr:nth-child(2) {
      border-top: none !important;
      }
      .rw-brd{border-bottom:1px solid #999;}
      .prc-locl {text-align:right;}
      .sec-ri8 {text-align:right; font-weight:600;}
      .ratechart table td {
      background: #fff;
      padding: 1px 14px;
      font-weight: 500;
      color: #000;
      text-align: center;
      font-size: 14px;
      vertical-align: middle;
      width: 100%;
      padding: 5px;
      }
      .ratechart table td.tblhead {
      font-size: 18px;
      padding: 6px 6px;
      font-weight: 600;
      }
      .lol-txt{
      top:0 !important;
      text-align: center;
      margin-bottom: 10px;
      }
      }
      @media screen and (min-width: 768px) {
      .rwd-table td:before {
      display: none;
      }
      .rwd-table th,
      .rwd-table td {
      display: table-cell;
      }
      .rwd-table th:last-child,
      .rwd-table td:last-child {
      padding-right: 0;
      }
      }
      /*rwd table css start here*/
      @media only screen and (max-width: 800px) {
      /* Force table to not be like tables anymore */
      #no-more-tables table, 
      #no-more-tables thead, 
      #no-more-tables tbody, 
      #no-more-tables td, 
      #no-more-tables tr { 
      display: block; 
      float: left;
      width: 100%;
      background:none;
      height:auto;
      }
      /* Hide table headers (but not display: none;, for accessibility) */
      #no-more-tables thead tr { 
      position: absolute;
      top: -9999px;
      left: -9999px;
      }
      #no-more-tables td { 
      /* Behave  like a "row" */
      border: none;
      border-bottom: none;
      white-space: normal;
      text-align:left;
      width:100%;
      }
      #no-more-tables td:before { 
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      top: 6px;
      left: 6px;
      width: 45%; 
      padding-right: 10px; 
      white-space: nowrap;
      text-align:left;
      font-weight: bold;
      }
      /*
      Label the data
      */
      #no-more-tables td:before { content: attr(data-title); }
      }
   </style>
   <script type="text/javascript">
      function changepackage(city_id)
      {
          $.ajax({
            url:"changepackage.php",
            data:{city_id:city_id},
            method:"post",
            success:function(msg)
            {
             // alert(msg);
              var response= JSON.parse(msg)
              $("#selectduration").html(response['select']);
              $('.selectpicker').selectpicker('refresh');
            }
          })
      }
   </script>
   <script type="text/javascript">
      $(window).load(function() {
          $(".loader").fadeOut("slow");
      });
   </script>
   <div class="main-wrapper" style="background:#f6f8fb ">
      
      <link href="css/header.css" rel="stylesheet">
      <link href="css/dropdowns-skin-discrete.css">
      <style>
         .dropdowns a {text-decoration: none; color:#fff;}
         .dropdowns a:hover {text-decoration: none; color:#fff;}
         .toggleMenu {
         display:  none;
         }
        
         .nav {
         list-style: none;
         *zoom: 1;
         }
         .nav:before,
         .nav:after {
         content: " "; 
         display: table; 
         }
         .nav:after {
         clear: both;
         }
         .nav ul {
         list-style: none;
         }
         .nav a {
         padding:13px 7px; font-size: 13px;
         }
         .nav li {
         position: relative;
         }
         .nav > li {
         float: left;
         }
         .nav > li > .parent {
         background-repeat: no-repeat;
         background-position: right;
         }
         .nav > li > a {
         display: block;
         }
         .nav > li > a:hover {
         background: #152b57;
         color: #fff;
         font-weight: normal;
         border-color: #fff; margin:0px;
         clear: both;
         }
         .nav li  ul { top: 39px;
         position: absolute;
         left: -9999px;z-index: 1000;
         background-color:#fff;
         border-radius: 4px;
         -webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
         box-shadow: 0 6px 12px
         rgba(0, 0, 0, .175);
         }
         .nav > li.hover > ul {
         left: 0;
         }
         .nav li li.hover ul {
         left: 100%;
         top: 0;
         }
         .nav li li a {
         display: block;
         position: relative;
         z-index:100; color:#000
         }
         .nav li li a:hover {
         background: #152b57;
         color: #fff;
         font-weight: normal;
         border-color: #fff; margin:0px;
         }
         .nav li li li a {
         z-index:200;
         }
         @media screen and (max-width: 768px) {
         .active {
         display: block;
         }
         .nav > li {
         float: none;
         }
         .nav > li > .parent {
         background-position: 95% 50%;
         }
         .nav li li .parent {
         background-repeat: no-repeat;
         background-position: 95% 50%;
         }
         .nav ul {
         display: block;
         width: 100%;
         }
         .nav > li.hover > ul , .nav li li.hover ul {
         position: static;
         }
         }
         .wappicon{
         background: #2bcc47;
         background-image: linear-gradient(to top,#2bcc47,#3ae258);
         color: #fff;
         font-size: 15px!important;
         padding: 6px 10px;
         margin: 12px 0 0 0;
         border-radius: 4px;
         display: none;
         }
         .readmores{
            margin-top: 20px;
        }
        .readmores p{
            text-align: justify;
        }
      </style>
      
      <div style="clear:both;"></div>
      
      <section class="mainban" style="height: 50vh;">
     <div class="container vivonto">
       <div class="row">
         <div class="col-md-12">
           <div class="mainner">
             <h2>
               About Us
             </h2>
               <div class="textslider">
                <h1>Experiences</h1>
                <h1>Adventures</h1>
                <h1>Escapes</h1>
                <h1>Thrills</h1>
                <h1>
                  Experiences
                </h1>
              </div>

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

</div>
   </section>
      
      <script>
         $(document).ready(function () {
           $('[data-toggle=offcanvas]').click(function () {
             $('.row-offcanvas').toggleClass('active');
           });
         });
         
         $(document).ready(function() {
             $(".cn-hd").click(function(e) {
                 e.stopPropagation();
                 e.preventDefault();
                 $(this).toggleClass("active");
                 $(".cnvas-hid span").toggleClass("active");
             });
           $(document).click(function(e){
               if(!e.target.closest("span") && $(".cnvas-hid .cn-hd").hasClass("active")){
                  $(".cnvas-hid span").toggleClass("active");
                  $(".cn-hd").toggleClass("active");
              $(".cn-hd").css("left", "-114px");
              $('.row-offcanvas').toggleClass('active');
               }
             })
           
         });
      </script>
      
      <script type="text/javascript">
         //script used to submit enquiry now form section goes here//
         $(document).ready(function() {               
             $("#enqform").validate({
                 rules:{
                     FirstName:{
                         required: true,
                         minlength: 2,
                         maxlength: 30,
                     },
                     LastName:{
                         required: true,
                         minlength: 2,
                         maxlength: 30,
                     },
                     YourEmail:{
                         required: true,
                         minlength: 2,
                         maxlength: 100,
                     },
                     PhoneNumber:{
                         required: true,
                         minlength: 10,
                         maxlength: 10,
                     },
                     Message:{
                         required: true,
                         minlength: 2,
                         maxlength: 500,
                     }
                 },
                 highlight: function (element) {
                     $(element).closest('.row').addClass('has-error');
                 },
                 messages:{
                     FirstName:{
                         required: "This field is required",
                         minlength: "Name must be at least 2 characters",
                         maxlength: "Maximum number of characters - 30",
                     },
                     LastName:{
                         required: "This field is required",
                         minlength: "Name must be at least 2 characters",
                         maxlength: "Maximum number of characters - 30",
                     },
                     YourEmail:{
                         required: "This field is required",
                         minlength: "Name must be at least 2 characters",
                         maxlength: "Maximum number of characters - 100",
                     },
                     PhoneNumber:{
                         required: "This field is required",
                         minlength: "must be at least 10 Digits",
                         maxlength: "Maximum number of Digits - 10",
                     },
                     Message:{
                         required: "This field is required",
                         minlength: "must be at least 2 characters",
                         maxlength: "Maximum number of characters - 500",
                     }
                 },
                 submitHandler: function(form) { 
                      //  $.ajax({
                      //  url:'addenqform.php',
                      //    type:'GET',
                      //    dataType: 'html',
                      //    success: function(data) {
                      //      alert(data);
                      //        //$("#block").html(data);
                      //    }
                      // });
                      document.getElementById('enqbtn').innerHTML ='Please Wait...';
                      document.getElementById("enqbtn").style.cursor = "not-allowed";
                     $.ajax({
                     type: 'post',
                     url: 'addenqform.php',
                     data: $('form').serialize(),
                     success: function (data) {
                       //alert(data);
                      $("#enqsubmittext").html(data); 
                       var timeout = 7000; // in miliseconds (3*1000)
               
                     $('.alert').delay(timeout).fadeOut(300);
                       $("#enqform")[0].reset();
                     document.getElementById('enqbtn').innerHTML ='Submit';
                     document.getElementById("enqbtn").style.cursor = "";
                        
                     }
                   });
                      return false; // required to block normal submit since you used ajax
                  }
              });
         });
         
         
             
      </script>
      
      <script>
         $('ul.nav li.dropdown').hover(function() {
           $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeIn(100);
         }, function() {
           $(this).find('.dropdown-menu').stop(true, true).delay(100).fadeOut(100);
         });
         
      </script>
     
      <script src="js/slick.js"></script>    
      
    
      
      <div class="main-contant">
        <div class="homnav">
          <div class="container">
            <div class="row">
              <div class="col-md-12">
                <div class="honaine">
                  <ul>
                    <li>
                      <a href="{{route('indexPage')}}">
                        Home /
                      </a>
                    </li>
                    <li>
                      <a href="#">
                        About Us
                      </a>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>
        </div>

<section class="pacdetil">
          <div class="container">
            <div class="row">
              <div class="col-md-12">
                <div class="padeinn">
                  <h4>
                   About Us
                  </h4>
                  <div class="readmores">
                        <p>
                        TravelSangi – Explore - Expedite – Experience, is dedicated for all type of Adventures Activities and Wildlife adventures in India as well as Nepal, Bhutan, Srilanka, Tibet. TravelSangi is leading and fast growing travel agency in India. Our objectives are to explore and promote various wildlife and adventure destinations. We have a very professional team for planning and executing different adventure activities, Wildlife Safaris, Camping, Bike & Jeep Safaris. India has huge scope of Adventure Activities, Wildlife Tours, . Wildlife Adventures is physical, intellectual and spiritual adventures more a state of mind than a risky or arduous challenge. The real adventure is new insights.
                        </p>
                        <p>
                         Our experts have been honestly helping travelers, to experience the real wilderness and unexplored destination of India for last few years by putting our guests in highest priority. Sincerity, good faith, genuineness are our credo of Moksha Group. We cater tour plans of your choice of Adventures activities implies a real India without artifice it. We can proceed with the assurance that our every trip not only will strengthen our own human bond, but also will help for inter-cultural exchanges. All our tour plans are designed to protect the ecology as well as respect the local culture and tradition. We encourage travelers to imbibe our slogan “Lets Save our Ecology”, and contribute something to society while travelling and exploring without disturbing nature. 
                        </p>
                    </div>
                </div>
              </div>
              <br>

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

</div>

<style>

.raiting-holder .counter
    {
      margin-left: 10px;
    }
    .pop-card {
        position: relative;
        display: inline-block;
        background-color: #fff;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.15);
        -webkit-transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
        transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
    }
    .tour-card .image-holder {
    background-size: cover;
    background-position: center;
    position: relative;
    height: 54%;
    z-index: 1;
}
.tour-card .image-holder .tour-card-image {
    height: 100%;
    width: 100%;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    display: block;
    object-fit: cover;
}
.lazy-image:before {
    content: "";
    background-image: url(https://ui-assets-gc.thrillophilia.com/assets/placeholder-6a8d720….jpg);
    background-repeat: no-repeat;
    height: 100%;
    width: 100%;
    background-size: cover;
    z-index: -1;
    display: block;
}
.tour-card .image-holder .additional-list-info {
    position: absolute;
    bottom: 0;
    height: 56px;
    background-image: linear-gradient(to top, #000, rgba(84,84,84,0));
    width: 100%;
    display: flex;
    align-items: flex-end;
    padding-left: 17px;
    margin: 0px;
}
.additional-list-info li {
    display: flex;
    align-items: center;
    margin-bottom: 7px;
    color: #fff;
}
.trip-duration i
{
  margin-right: 10px;
}
.tour-card .image-holder .additional-list-info [class^="icon-"] {
    color: #fff;
}
.icon-watch:before {
    content: "";
}
.tour-card .card-content {
    background-color: #fff;
    padding: 10px 13px 7px 17px;
}
.tour-card .raiting-holder {
    align-items: baseline;
}
.raiting-holder {
    color: #505050;
    font-size: 1.4rem;
    display: flex;
    align-items: center;
}
.raiting-list {
  margin: 0px;
    display: flex;
    padding-left: 0px;
}
.raiting-list li {
    color: #ffb100;
    font-size: 1.3rem;
    margin-right: 3px;
}
.raiting-list .nulli {
    color: #d3d3d3 !important;
}
.raiting-list .fa-star {
    color: #ffb100;
}

.tour-card .title {
    color: #202020;
    line-height: 1.4;
    font-size: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-height: 1.4;
    font-weight: bold;
    margin-bottom: 0.5em;
}
.tour-card .col:nth-child(1) {
    padding-right: 5px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1 1 40%;
    width: 100%;
}
.old-price {
    position: relative;
    display: block;
    opacity: 0.56;
    color: #505050;
    font-size: 1.2rem;
    line-height: 0.6;
    margin-bottom: 11px;
    white-space: nowrap;
    display: flex;
}
.old-price:before {
    content: "";
    position: absolute;
    top: 48%;
    left: -3px;
    right: -3px;
    background-color: #505050;
    height: 1px;
}
.current-price {
    display: block;
    color: #202020;
    font-size: 1.6rem;
    line-height: 10px;
    font-weight: 600;
    letter-spacing: -0.32px;
    white-space: nowrap;
    display: flex;
    align-items: baseline;
}
.tour-card .current-price .current-price-inventory-name {
    font-weight: 400;
    font-size: 12px;
    color: #8e8e8e;
    margin-left: 4px;
}
.tour-card .btn-holder {
    display: flex;
    flex-grow: 1;
    justify-content: flex-start;
    align-items: center;
    width: 100%;
}
.tour-card .btn-holder .btn {
    width: 100%;
    background: #f68a1e;
    color: #fff;
    margin-top: 10px;
}
    .pacbox
    {
      margin-top: 30px;
    }
    .heps
    {
      display: flex;
    font-size: 19px;
    justify-content: space-between;
    text-transform: capitalize;
    }
    .mainna
    {
      color: #000;
    }
    .padeinn
    {
      background: #fff;
      padding: 30px;
      box-shadow: 0 0 50px 0 rgba(0,0,0,0.02);
    }
    .clro
    {
      color: #f68a1e;

}
        .padeinn h4
        {
          border-left: 4px solid #f68a1e;
    padding-left: 10px;
        }

.bs-example-gap{padding:1.5em;}
      .lgn-txt {
      font-weight: 900;
      font-size: 24px;
      color: #333;
      margin-bottom: 15px;
      float:left; 
      width:100%;
      }
      .form-group label{clear:both;}
      .parator-divide{float:left; width:100%; text-align:center; font-size:12px; color:#727070; margin:10px auto;}
      .modal-dialog1{width:500px; margin:30px auto;}
      .sign-tab {
      list-style: none;
      padding: 5px;
      margin: 20px 0 20px 0;
      border-radius:50px;
      background:#fff;
      -webkit-box-shadow: 0 1px 7px 0 rgba(0,0,0,.3);
      -moz-box-shadow: 0 1px 7px 0 rgba(0,0,0,.3);
      box-shadow: 0 1px 7px 0 rgba(0,0,0,.3);
      }
      .sign-tab:after {
      content: "";
      display: table;
      clear: both;
      }
      .sign-tab li a {
      display: block;
      text-decoration: none;
      padding: 7px;
      background: transparent;
      text-transform:uppercase;
      color: #333;
      font-size: 15px;
      float: left;
      width: 50%;
      border-radius: 50px;
      text-align: center;
      cursor: pointer;
      transition: .5s ease;
      font-weight: 600;
      }
      .sign-tab .active a {
      background: #1ab188;
      color: #ffffff;
      background: linear-gradient(to right,#53b2fe,#065af3);
      color: #ffffff;
      font-weight: 600;
      cursor:pointer;
      }
      .sign-tab-content > div:last-child {
      display: none;
      }
      .mdl-log-btn {
      padding: 0 20px;
      width: 100%;
      height: 40px;
      font-size: 16px;
      font-weight: 600;
      margin-top: 10px;
      margin-bottom: 10px;
      border-radius: 5px;
      background: radial-gradient(circle at top right, #fab35c,#f83600);
      color: #fff;
      line-height: 1.2;
      text-transform: uppercase;
      letter-spacing: 1px;
      -webkit-transition: all 0.4s;
      -o-transition: all 0.4s;
      -moz-transition: all 0.4s;
      transition: all 0.4s;
      }
      .pushRight{
      background: radial-gradient(circle at top right, #31708f,#3c763d);
      position: absolute;
      right: 30px;
      top: 147px;
      z-index: 20;
      transition: right 1s cubic-bezier(.18,.89,.32,1.28);
      text-decoration: underline;
      cursor: pointer;
      color: #fff;
      text-decoration: none;
      padding: 3px 14px;
      border-radius: 50px;
      font-weight:600;
      }
      .pushRight:hover{color:#fff;}
      .backsec{
      margin-bottom: 20px;
      } 
      .backbtn{
      font-weight: 900;
      text-transform: uppercase;
      color: #008cff;
      cursor: pointer;
      }
      .errorcls{
      color: red;
      }
      .errorsign{
      background: url(https://imgak.mmtcdn.com/pwa_v3/pwa_hotel_assets/header/popupFlowSprite.png) no-repeat;
      -webkit-background-size: 170px 170px; */
      -moz-background-size: 170px 170px;
      background-size: 170px 170px;
      }
      #otpsecs{color:#f00; font-weight:600; cursor:default;}
      #showotpsec {
      display: none;
      }
      #errorsec {
      display: none;
      }
      .loaderimg {
      position: absolute;
      right: 6%;
      bottom: 38%;
      display: none;
      }
      @media screen and (max-width:768px) { .modal-dialog{width:100%; margin:0 auto;} .modal-dialog1{width:100%;}.bs-example-gap{padding:0 1em;}.sign-tab li a{font-size:12px;}}
   </style>
   <div id="sign-in" class="modal fade" role="dialog">
      <div class="modal-dialog1 animated">
         
         <div class="modal-content">
            <div class="modal-header" style="display: none;">
               <button type="button" class="close" data-dismiss="modal">&times;</button>
               <h4 class="modal-title"> Log IN </h4>
            </div>
            <div class="col-md-12 col-sm-12 col-xs-12 bs-example-gap">
               <form name="frmsignup" id="frmsignup" autocomplete="off" method="post">
                  <div class="sign-tab-content" id="loginsec">
                     
                     
                     
                     <div id="signup">
                        <div class="lgn-txt"> Login/Signup</div>
                        <div class="form-group">
                           <label> Email & Mobile No </label>
                           <div class="clearfix"></div>
                           <input type="text" class="form-control" id="username" name="username" placeholder="Enter Email Address & Mobile No" />
                           <p class="errorcls" id="errorsec"></p>
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
                           <button type="button" id="btnlogin" name="btnlogin" class="mdl-log-btn" onClick="return checkvalid('b403c0a02847ae0f61ef6d1592a2866d');">Continue</button>
                        </div>
                        <div class="parator-divide"> Or Login/Signup With  </div>
                        <div class="col-md-7 col-sm-6 col-xs-12" style="margin-bottom:15px;">
                           
                           <fb:login-button scope="public_profile,email" onlogin="checkLoginState();" data-width="" data-size="large" data-button-type="login_with" data-layout="default" data-auto-logout-link="false">
                           </fb:login-button>
                        </div>
                        <div class="col-md-3 col-sm-6 col-xs-12" style="margin-bottom:15px;">
                           
                           <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark" ></div>
                        </div>
                        <div class="clearfix"></div>
                     </div>
                     <div id="login">
                        <div class="lgn-txt"> Login/Signup </div>
                        <div class="form-group">
                           <label> Email </label>
                           <div class="clearfix"></div>
                           <input type="text" class="form-control" id="" value="" placeholder="Enter Email" />
                        </div>
                        <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
                           <button type="button" class="mdl-log-btn" style="margin-bottom:20px;" >Continue</button>
                        </div>
                     </div>
                  </div>
                  <div id="showotpsec">
                     <div class="backsec">
                        <a class="backbtn" onclick="return backbtn();"> <i class="fa fa-arrow-left"></i>&nbsp;Back </a>
                     </div>
                     <div class="lgn-txt" id="modal_header">Verify Your E-mail ID</div>
                     <div class="form-group">
                        <label><span id="otpsecs">OTP has been sent to EMAIL </span></label>
                        <div class="clearfix"></div>
                        <input type="text" class="form-control" id="otpvalue" name="otpvalue" placeholder="Enter OTP" maxlength="4" />
                        <a class="pushRight" id="otpbutton" onClick="return resendotp('b403c0a02847ae0f61ef6d1592a2866d');"> Resend OTP</a>
                        <div class="loaderimg" id="otpresendloader">
                           <img src="/admin//img/sending1.gif" title="loader" alt="loader" style="height: 34px;width: 34px;">
                        </div>
                        <p class="errorcls" id="errorotp"></p>
                     </div>
                     <div class="col-md-12 col-sm-12 col-xs-12 no-padding">
                        <button type="button" class="mdl-log-btn" style="margin-bottom:20px;" onClick="return checklogin('b403c0a02847ae0f61ef6d1592a2866d');">LOGIN</button>
                     </div>
                  </div>
                  <input type="hidden" id="maxresendno" name="maxresendno" value="">
                  <input type="hidden" id="reotpsessionid" name="reotpsessionid" value="">
               </form>
            </div>
            <div class="clearfix"></div>
         </div>
      </div>
   </div>
   @endsection