<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <section> <div class="row full-width-search"> <div class="container clear-padding"> <div class="col-md-8 search-section"> <div role="tabpanel"> <!-- BEGIN: CATEGORY TAB --> <ul class="nav nav-tabs search-top" role="tablist" id="searchTab"> <li role="presentation" class="text-center active"> <a href="#flight" aria-controls="flight" role="tab" data-toggle="tab" aria-expanded="true"> <i class="fa fa-plane"></i> <span>FLIGHTS</span> </a> </li> <li role="presentation" class="text-center"> <a href="#hotel" aria-controls="hotel" role="tab" data-toggle="tab" aria-expanded="false"> <i class="fa fa-bed"></i> <span>HOTELS</span> </a> </li> <li role="presentation" class="text-center"> <a href="#holiday" aria-controls="holiday" role="tab" data-toggle="tab" aria-expanded="false"> <i class="fa fa-suitcase"></i> <span>HOLIDAYS</span> </a> </li> <li role="presentation" class="text-center"> <a href="#taxi" aria-controls="taxi" role="tab" data-toggle="tab" aria-expanded="false"> <i class="fa fa-cab"></i> <span>CAR</span> </a> </li> <li role="presentation" class="text-center"> <a href="#cruise" aria-controls="cruise" role="tab" data-toggle="tab" aria-expanded="false"> <i class="fa fa-ship"></i> <span>CRUISE</span> </a> </li> </ul> <!-- END: CATEGORY TAB --> <!-- BEGIN: TAB PANELS --> <div class="tab-content"> <!-- BEGIN: FLIGHT SEARCH --> <div role="tabpanel" class="tab-pane active" id="flight"> <form> <div class="col-md-12 product-search-title">Book Flight Tickets</div> <div class="col-md-12 search-col-padding"> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio1" value="One Way"> One Way </label> <label class="radio-inline"> <input type="radio" name="inlineRadioOptions" id="inlineRadio2" value="Round Trip"> Round Trip </label> </div> <div class="clearfix"></div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Leaving From</label> <div class="input-group"> <input type="text" name="departure_city" class="form-control" required="" placeholder="E.g. London"> <span class="input-group-addon"><i class="fa fa-map-marker fa-fw"></i></span> </div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Leaving To</label> <div class="input-group"> <input type="text" name="destination_city" class="form-control" required="" placeholder="E.g. New York"> <span class="input-group-addon"><i class="fa fa-map-marker fa-fw"></i></span> </div> </div> <div class="clearfix"></div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Departure</label> <div class="input-group"> <input type="text" id="departure_date" name="departure_date" class="form-control hasDatepicker" placeholder="DD/MM/YYYY"> <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span> </div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Return</label> <div class="input-group"> <input type="text" id="return_date" class="form-control hasDatepicker" name="return_date" placeholder="DD/MM/YYYY"> <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span> </div> </div> <div class="clearfix"></div> <div class="col-md-4 col-sm-4 search-col-padding"> <label>Adult</label><br> <span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input id="adult_count" name="adult_count" value="1" class="form-control quantity-padding ui-spinner-input" aria-valuemin="1" aria-valuenow="1" autocomplete="off" role="spinbutton"><a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n"><i class="fa fa-plus"></i></span></span></a><a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s"><i class="fa fa-minus"></i></span></span></a></span> </div> <div class="col-md-4 col-sm-4 search-col-padding"> <label>Child</label><br> <span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input type="text" id="child_count" name="child_count" value="1" class="form-control quantity-padding ui-spinner-input" aria-valuemin="1" aria-valuenow="1" autocomplete="off" role="spinbutton"><a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n"><i class="fa fa-plus"></i></span></span></a><a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s"><i class="fa fa-minus"></i></span></span></a></span> </div> <div class="col-md-4 col-sm-4 search-col-padding"> <label>Class</label><br> <select class="selectpicker bs-select-hidden"> <option>Business</option> <option>Economy</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="Business"><span class="filter-option pull-left">Business</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Business</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Economy</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="clearfix"></div> <div class="col-md-12 search-col-padding"> <button type="submit" class="search-button btn transition-effect">Search Flights</button> </div> <div class="clearfix"></div> </form> </div> <!-- END: FLIGHT SEARCH --> <!-- START: HOTEL SEARCH --> <div role="tabpanel" class="tab-pane" id="hotel"> <form> <div class="col-md-12 product-search-title">Book Hotel Rooms</div> <div class="col-md-12 search-col-padding"> <label>I Want To Go</label> <div class="input-group"> <input type="text" name="destination-city" class="form-control" required="" placeholder="E.g. New York"> <span class="input-group-addon"><i class="fa fa-map-marker fa-fw"></i></span> </div> </div> <div class="clearfix"></div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Check - In</label> <div class="input-group"> <input type="text" name="check-in" id="check_in" class="form-control hasDatepicker" placeholder="DD/MM/YYYY"> <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span> </div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Check - Out</label> <div class="input-group"> <input type="text" name="check-out" id="check_out" class="form-control hasDatepicker" placeholder="DD/MM/YYYY"> <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span> </div> </div> <div class="clearfix"></div> <div class="col-md-3 col-sm-3 search-col-padding"> <label>Adult</label><br> <span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input id="hotel_adult_count" name="adult_count" value="1" class="form-control quantity-padding ui-spinner-input" aria-valuemin="1" aria-valuenow="1" autocomplete="off" role="spinbutton"><a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n"><i class="fa fa-plus"></i></span></span></a><a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s"><i class="fa fa-minus"></i></span></span></a></span> </div> <div class="col-md-3 col-sm-3 search-col-padding"> <label>Child</label><br> <span class="ui-spinner ui-widget ui-widget-content ui-corner-all"><input type="text" id="hotel_child_count" name="child_count" value="1" class="form-control quantity-padding ui-spinner-input" aria-valuemin="1" aria-valuenow="1" autocomplete="off" role="spinbutton"><a class="ui-spinner-button ui-spinner-up ui-corner-tr ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-n"><i class="fa fa-plus"></i></span></span></a><a class="ui-spinner-button ui-spinner-down ui-corner-br ui-button ui-widget ui-state-default ui-button-text-only" tabindex="-1" role="button"><span class="ui-button-text"><span class="ui-icon ui-icon-triangle-1-s"><i class="fa fa-minus"></i></span></span></a></span> </div> <div class="col-md-3 col-sm-3 search-col-padding"> <label>Rooms</label><br> <select class="selectpicker bs-select-hidden" name="rooms"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="1"><span class="filter-option pull-left">1</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">3</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">4</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">5</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">6</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="col-md-3 col-sm-3 search-col-padding"> <label>Nights</label><br> <select class="selectpicker bs-select-hidden" name="nights"> <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="1"><span class="filter-option pull-left">1</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">3</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">4</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">5</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">6</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="clearfix"></div> <div class="col-md-12 search-col-padding"> <button type="submit" class="search-button btn transition-effect">Search Hotels</button> </div> <div class="clearfix"></div> </form> </div> <!-- END: HOTEL SEARCH --> <!-- START: BEGIN HOLIDAY --> <div role="tabpanel" class="tab-pane" id="holiday"> <form> <div class="col-md-12 product-search-title">Book Holiday Packages</div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>From</label> <div class="input-group"> <input type="text" name="pack-departure-city" class="form-control" required="" placeholder="E.g. New York"> <span class="input-group-addon"><i class="fa fa-map-marker fa-fw"></i></span> </div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>I Want To Go</label> <div class="input-group"> <input type="text" name="pack-destination-city" class="form-control" required="" placeholder="E.g. New York"> <span class="input-group-addon"><i class="fa fa-map-marker fa-fw"></i></span> </div> </div> <div class="clearfix"></div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Starting From</label> <div class="input-group"> <input type="text" id="package_start" class="form-control hasDatepicker" placeholder="DD/MM/YYYY"> <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span> </div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Duration(Optional)</label><br> <select class="selectpicker bs-select-hidden" name="holiday_duration"> <option>3 Days</option> <option>5 Days</option> <option>1 Week</option> <option>2 Weeks</option> <option>1 Month</option> <option>1+ Month</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="3 Days"><span class="filter-option pull-left">3 Days</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">3 Days</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">5 Days</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1 Week</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2 Weeks</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1 Month</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1+ Month</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="clearfix"></div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Package Type(Optional)</label><br> <select class="selectpicker bs-select-hidden" name="package_type"> <option>Group</option> <option>Family</option> <option>Individual</option> <option>Honeymoon</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="Group"><span class="filter-option pull-left">Group</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Group</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Family</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Individual</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Honeymoon</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Budget(Optional)</label><br> <select class="selectpicker bs-select-hidden" name="package_budget"> <option>500</option> <option>1000</option> <option>1000+</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="500"><span class="filter-option pull-left">500</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">500</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1000</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1000+</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="clearfix"></div> <div class="col-md-12 search-col-padding"> <button type="submit" class="search-button btn transition-effect">Search Packages</button> </div> <div class="clearfix"></div> </form> </div> <!-- END: HOLIDAYS --> <!-- START: CAR SEARCH --> <div role="tabpanel" class="tab-pane" id="taxi"> <form> <div class="col-md-12 product-search-title">Search Perfect Car</div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Pick Up Location</label> <div class="input-group"> <input type="text" name="departure-city" class="form-control" required="" placeholder="E.g. New York"> <span class="input-group-addon"><i class="fa fa-map-marker fa-fw"></i></span> </div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Drop Off Location</label> <div class="input-group"> <input type="text" name="destination-city" class="form-control" required="" placeholder="E.g. New York"> <span class="input-group-addon"><i class="fa fa-map-marker fa-fw"></i></span> </div> </div> <div class="clearfix"></div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Pick Up Date</label> <div class="input-group"> <input type="text" id="car_start" class="form-control hasDatepicker" placeholder="MM/DD/YYYY"> <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span> </div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Pick Off Date</label> <div class="input-group"> <input type="text" id="car_end" class="form-control hasDatepicker" placeholder="MM/DD/YYYY"> <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span> </div> </div> <div class="clearfix"></div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Car Brnad(Optional)</label><br> <select class="selectpicker bs-select-hidden" name="brand"> <option>BMW</option> <option>Audi</option> <option>Mercedes</option> <option>Suzuki</option> <option>Honda</option> <option>Hyundai</option> <option>Toyota</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="BMW"><span class="filter-option pull-left">BMW</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">BMW</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Audi</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Mercedes</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Suzuki</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Honda</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Hyundai</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="6"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Toyota</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Car Type(Optional)</label><br> <select class="selectpicker bs-select-hidden" name="car_type"> <option>Limo</option> <option>Sedan</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="Limo"><span class="filter-option pull-left">Limo</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Limo</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Sedan</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="clearfix"></div> <div class="col-md-12 search-col-padding"> <button type="submit" class="search-button btn transition-effect">Search Cars</button> </div> <div class="clearfix"></div> </form> </div> <!-- END: CAR SEARCH --> <!-- START: CRUISE SEARCH --> <div role="tabpanel" class="tab-pane" id="cruise"> <form> <div class="col-md-12 product-search-title">Cruise Holidays</div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>From</label> <div class="input-group"> <input type="text" name="pack-departure-city" class="form-control" required="" placeholder="E.g. New York"> <span class="input-group-addon"><i class="fa fa-map-marker fa-fw"></i></span> </div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>I Want To Go</label> <div class="input-group"> <input type="text" name="pack-destination-city" class="form-control" required="" placeholder="E.g. New York"> <span class="input-group-addon"><i class="fa fa-map-marker fa-fw"></i></span> </div> </div> <div class="clearfix"></div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Starting From</label> <div class="input-group"> <input type="text" id="cruise_start" class="form-control hasDatepicker" placeholder="DD/MM/YYYY"> <span class="input-group-addon"><i class="fa fa-calendar fa-fw"></i></span> </div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Duration(Optional)</label><br> <select class="selectpicker bs-select-hidden" name="holiday_duration"> <option>3 Days</option> <option>5 Days</option> <option>1 Week</option> <option>2 Weeks</option> <option>1 Month</option> <option>1+ Month</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="3 Days"><span class="filter-option pull-left">3 Days</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">3 Days</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">5 Days</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1 Week</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">2 Weeks</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="4"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1 Month</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="5"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1+ Month</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="clearfix"></div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Package Type(Optional)</label><br> <select class="selectpicker bs-select-hidden" name="package_type"> <option>Group</option> <option>Family</option> <option>Individual</option> <option>Honeymoon</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="Group"><span class="filter-option pull-left">Group</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Group</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Family</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Individual</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="3"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">Honeymoon</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="col-md-6 col-sm-6 search-col-padding"> <label>Budget(Optional)</label><br> <select class="selectpicker bs-select-hidden" name="package_budget"> <option>500</option> <option>1000</option> <option>1000+</option> </select><div class="btn-group bootstrap-select"><button type="button" class="btn dropdown-toggle custom-select-button" data-toggle="dropdown" title="500"><span class="filter-option pull-left">500</span> <span class="caret"></span></button><div class="dropdown-menu open"><ul class="dropdown-menu inner" role="menu"><li data-original-index="0" class="selected"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">500</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="1"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1000</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li><li data-original-index="2"><a tabindex="0" class="" style="" data-tokens="null"><span class="text">1000+</span><span class="glyphicon glyphicon-ok check-mark"></span></a></li></ul></div></div> </div> <div class="clearfix"></div> <div class="col-md-12 search-col-padding"> <button type="submit" class="search-button btn transition-effect">Search Cruises</button> </div> <div class="clearfix"></div> </form> </div> <!-- END: CRUISE SEARCH --> </div> <!-- END: TAB PANE --> </div> </div> <div class="offer-slider"> <div class="owl-carousel col-md-4 text-right owl-theme owl-responsive-1000 owl-loaded" id="offer1"> <div class="owl-stage-outer"><div class="owl-stage" style="transform: translate3d(-1440px, 0px, 0px); transition: all 0.25s ease 0s; width: 2520px;"><div class="owl-item cloned" style="width: 360px; margin-right: 0px;"><div class="item"> <h3>Romantic Paris</h3> <h4>Starting From $999/Person</h4> <a href="#">KNOW MORE</a> </div></div><div class="owl-item cloned" style="width: 360px; margin-right: 0px;"><div class="item"> <h3>Sky High Dubai</h3> <h4>Starting From $399/Person</h4> <a href="#">KNOW MORE</a> </div></div><div class="owl-item" style="width: 360px; margin-right: 0px;"><div class="item"> <h3>Hong Kong Fun</h3> <h4>Starting From $599/Person</h4> <a href="#">KNOW MORE</a> </div></div><div class="owl-item" style="width: 360px; margin-right: 0px;"><div class="item"> <h3>Romantic Paris</h3> <h4>Starting From $999/Person</h4> <a href="#">KNOW MORE</a> </div></div><div class="owl-item active" style="width: 360px; margin-right: 0px;"><div class="item"> <h3>Sky High Dubai</h3> <h4>Starting From $399/Person</h4> <a href="#">KNOW MORE</a> </div></div><div class="owl-item cloned" style="width: 360px; margin-right: 0px;"><div class="item"> <h3>Hong Kong Fun</h3> <h4>Starting From $599/Person</h4> <a href="#">KNOW MORE</a> </div></div><div class="owl-item cloned" style="width: 360px; margin-right: 0px;"><div class="item"> <h3>Romantic Paris</h3> <h4>Starting From $999/Person</h4> <a href="#">KNOW MORE</a> </div></div></div></div><div class="owl-controls"><div class="owl-nav"><div class="owl-prev" style="display: none;">prev</div><div class="owl-next" style="display: none;">next</div></div><div class="owl-dots" style=""><div class="owl-dot"><span></span></div><div class="owl-dot"><span></span></div><div class="owl-dot active"><span></span></div></div></div></div> </div> </div> </div> </section>

.home-title { margin-top: 60px; color: #fff; } .home-title h1 { margin-top: 0px; font-weight: 800; font-size: 50px; letter-spacing: 2px; } .home-title h2 { margin-bottom: 0px; } .search-section { margin-top: 60px; margin-bottom: 60px; } .search-section .nav-tabs { border-bottom: none; } .search-section .nav-tabs .active { position: relative; } .search-section .nav-tabs .active:after { background: #f9676b none repeat scroll 0 0; content: ""; height: 20px; left: 40%; position: absolute; top: 80%; transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); width: 20px; } .search-section .nav-tabs > li > a { color: #ffffff; background: rgba(10, 49, 82, 0.5); letter-spacing: 1px; font-weight: bold; border-radius: 2px 2px 0 0; margin-right: 4px; } .search-section .nav > li > a { padding: 15px; } .search-section .nav-tabs > li { margin-bottom: 0px; } .search-section .nav-tabs > li > a:hover { color: #ffffff; background: #f9676b; border: 1px solid transparent; } .search-section .nav-tabs > li.active > a, .search-section .nav-tabs > li.active > a:focus, .search-section .nav-tabs > li.active > a:hover { color: #ffffff; background: #f9676b; border: 1px solid transparent; } .search-section .tab-content { color: #07253F; background: #fff; padding: 30px 15px; } .search-section label { font-size: 12px; font-weight: 600; text-transform: uppercase; } .search-section .form-control { background-color: transparent; border: 1px solid #BEC4C8; border-radius: 0; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; color: #07253F; display: block; font-size: 15px; height: 40px; line-height: 1.42857; padding: 6px 12px; transition: border-color 0.15s ease-in-out 0s, box-shadow 0.15s ease-in-out 0s; width: 100%; } .search-section .form-control::-moz-placeholder { color: #989DA0; opacity:1; } .search-section .form-control:-ms-input-placeholder { color: #BEC4C8; } .search-section .form-control::-webkit-input-placeholder { color: #BEC4C8; } .search-section .form-control::-o-input-placeholder { color: #BEC4C8; } .search-section .input-group-addon { background: transparent; color: #BEC4C8; border-top: 1px solid #BEC4C8; border-right: 1px solid #BEC4C8; border-bottom: 1px solid #BEC4C8; border-radius: 0; } .search-section .product-search-title { font-size: 18px; display: block; font-weight: 800; text-transform: uppercase; color: #f9676b; } .search-section .search-col-padding { padding-top: 15px; } .search-section option { color: #07253F; } #ui-datepicker-div { background: #07253F; z-index: 9999 !important; } #ui-datepicker-div table { margin: 10px; } .ui-datepicker-calendar a { padding: 5px; color: #ffffff; } .ui-datepicker-calendar a:hover { color: #00ADEF; } .ui-datepicker-calendar td { padding: 10px 5px; } .ui-datepicker-calendar .ui-state-disabled { color: #0A3152; } .ui-datepicker-calendar th { color: #ffffff; padding: 7px; } .ui-datepicker-header { margin: 10px; } .ui-datepicker-header .ui-datepicker-title { color: #ffffff; text-align: center; } .ui-datepicker-header a { color: #ffffff; cursor: pointer; } .ui-datepicker-header a:hover { color: #00ADEF; } .ui-spinner-up i { color: #BEC4C8; float: right; margin-top: -27px; margin-right: 10px; z-index: 99999; } .ui-spinner-down i { color: #BEC4C8; float: left; margin-top: -27px; margin-left: 10px; z-index: 99999; } .quantity-padding { padding-left: 40px !important; } .ui-datepicker-prev { float: left; } .ui-datepicker-next { float: right; } .custom-select-button { background: transparent none repeat scroll 0 0; border: 1px solid #BEC4C8; border-radius: 0; height: 40px; } .bootstrap-select.btn-group .dropdown-menu { background: #07253F; border-radius: 0; } .bootstrap-select.btn-group .dropdown-menu li a { color: #ffffff; background: #07253F !important; } .bootstrap-select.btn-group .dropdown-menu li a:hover { color: #00ADEF; } .bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) { width: 100%; } .btn:hover { color: #00ADEF; } .search-button { background: #f9676b; border-radius: 0; margin-top: 10px; padding: 10px 30px; font-size: 15px; text-transform: uppercase; letter-spacing: 1px; font-weight: bold; color: #fff; transition: all 0.3s ease; -ms-transition: all 0.3s ease; -moz-transition: all 0.3s ease; -webkit-transition: all 0.3s ease; -o-transition: all 0.3s ease; } .search-button:hover { background: #00adef; color: #fff; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background: #f9676b !important; } .offer-slider { margin-top: 200px; } .offer-slider .item { color: #fff; } .offer-slider .item h4, .offer-slider .item h3 { font-weight: bold; margin: 0px 0px 15px; } .offer-slider .item a { display: inline-block; color: #fff; border: 2px solid #fff; padding: 5px 15px; font-weight: bold; } .offer-slider .item a:hover { color: #fff; background: #f9676b; border: 2px solid transparent; } .offer-slider .owl-theme .owl-dots .owl-dot span { background: #fff; margin-top: 15px; } .offer-slider .owl-theme .owl-dots { text-align: right; } .bg-slider .carousel-caption { color: #fff; text-shadow: none; top: 30%; z-index: 0; } .bg-slider .carousel-caption h2 { font-weight: 800; font-size: 50px; letter-spacing: 2px; } .bg-slider .carousel-caption h4 { font-weight: 700; } .bg-slider .carousel-caption h4 span { font-weight: 900; } .bg-slider .carousel-caption a { border: 2px solid #fff; color: #fff; display: inline-block; font-weight: 700; margin-top: 15px; padding: 8px 20px; } .bg-slider .carousel-caption a:hover { color: #fff; background: #f9676b; border: 2px solid transparent; } .bg-slider .carousel-indicators { display: none; } .bottom-search { padding: 0 0 60px; background: #f7f7f7; } .bottom-search .search-section { margin: -53px 0 0; } .bottom-search .tab-content { box-shadow: 0px 0px 5px #e6e6e6; } .vertical-tab { padding-right: 0px; margin-top: 30px; } .vertical-tab .nav-tabs > li { display: block; width: 100%; } .vertical-tab .nav-tabs .active::after { display: none; } .vertical-tab-pannel { padding-left: 0px; } .vertical-tab-pannel .tab-content { box-shadow: 0px 0px 5px #e6e6e6; } .vertical-tab .nav-tabs > li > a { background: #f7f7f7; color: #BEC4C8; margin: 0px; border-radius: 0; border-bottom: 1px solid #e6e6e6; } .vertical-tab .nav-tabs > li > a i { margin-right: 5px; } .vertical-tab .nav-tabs > li.active > a, .vertical-tab .nav-tabs > li.active > a:focus, .vertical-tab .nav-tabs > li.active > a:hover { background: #fff none repeat scroll 0 0; color: #07253F; z-index: 2; border-bottom: 1px solid #e6e6e6; } .offer-box { color: #07253F; text-align: center; } .offer-box img { max-width: 100%; padding: 5px; border: 1px solid #e6e6e6; } .offer-box .item h4 { font-weight: bold; } .offer-box a { background: #f9676b none repeat scroll 0 0; color: #fff; display: inline-block; font-size: 12px; font-weight: bold; margin: 5px 0; padding: 8px 10px; } .offer-box a:hover { background: #00adef; } .vertical-search, .full-width-search { padding: 45px 0px; } .tran-search-box .tab-content { background: rgba(10, 49, 82, 0.5); color: #fff; } .tran-search-box .tab-content .form-control, .tran-search-box .input-group-addon, .tran-search-box .custom-select-button { color: #07253F; background: #fff; } .tran-search-box .nav-tabs { border-bottom: 4px solid #f9676b; } @media (max-width: 991px) { .offer-slider, .offer-box { display: none; } } @media (max-width:767px) { .vertical-tab .nav-tabs > li { display: block; width: auto; } .vertical-tab-pannel { padding-left: 15px; } .vertical-tab { padding-right: 15px; margin-top: 0px; } .search-top span { display: none; } .nav>li>a { padding: 10px; } .home-title h1 { font-size: 24px; } .home-title h2 { margin-bottom: 0px; font-size: 20px; } .bg-slider .carousel-caption h2 { font-size: 20px; } .bg-slider .carousel-caption h4, .bg-slider .carousel-caption a { display: none; } .bg-slider .carousel-caption { top: 5%; } }