@@include('header.htm', {
  "title": "Star Travel",
  "parents": "",
  "active": ""
})

<!-- ====================================
———	ACCORDION AND TOGGLES SECTION
===================================== -->
<section style="background-image: url(assets/img/pages/page-title-bg10.jpg);">
  <div class="container">
    <div class="row align-items-center justify-content-center" style="height: 300px;">
      <div class="col-md-6">
        <div class="section-title text-center">
          <h2 class="text-uppercase">Accordions & Toggles</h2>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ====================================
———	ACCORDION SECTION
===================================== -->
<section class="">
  <div class="container">
    <div class="section-title text-uppercase text-center">
      <h2>Accordions</h2>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="accordion" id="accordionExample">
          <div class="card">
            <div class="card-header" id="headingOne">
              <h5 class="">
                <button class="btn btn-link text-uppercase" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  How can I manage Instant Book settings?
                </button>
              </h5>
            </div>

            <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
              <div class="card-body">
                <div class="media">
                  <a href="#">
                    <img class="" src="assets/img/toggle/toggle-01.jpg" alt="Generic placeholder image">
                  </a>
              <div class="media-body">
                   <h5 class="text-uppercase">Story & History</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
              </div>
            </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingTwo">
              <h5 class="">
                <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  How do I list multiple rooms?
                </button>
              </h5>
            </div>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
              <div class="card-body">
                <div class="media">
                  <a href="#">
                    <img class="" src="assets/img/toggle/toggle-01.jpg" alt="Generic placeholder image">
                  </a>
              <div class="media-body">
                   <h5 class="text-uppercase">Story & History</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
              </div>
            </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingThree">
              <h5 class="">
                <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  How do I use my calendar?
                </button>
              </h5>
            </div>
            <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
              <div class="card-body">
                <div class="media">
                  <a href="#">
                    <img class="" src="assets/img/toggle/toggle-01.jpg" alt="Generic placeholder image">
                  </a>
              <div class="media-body">
                   <h5 class="text-uppercase">Story & History</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
              </div>
            </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingFour">
              <h5 class="">
                <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
                  How do I use my calendar?
                </button>
              </h5>
            </div>
            <div id="collapseFour" class="collapse" aria-labelledby="headingFour" data-parent="#accordionExample">
              <div class="card-body">
                <div class="media">
                  <a href="#">
                    <img class="" src="assets/img/toggle/toggle-01.jpg" alt="Generic placeholder image">
                  </a>
              <div class="media-body">
                   <h5 class="text-uppercase">Story & History</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
              </div>
            </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingFive">
              <h5 class="">
                <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
                  How do I make reservation?
                </button>
              </h5>
            </div>
            <div id="collapseFive" class="collapse" aria-labelledby="headingFive" data-parent="#accordionExample">
              <div class="card-body">
                <div class="media">
                  <a href="#">
                    <img class="" src="assets/img/toggle/toggle-01.jpg" alt="Generic placeholder image">
                  </a>
              <div class="media-body">
                   <h5 class="text-uppercase">Story & History</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
              </div>
            </div>
              </div>
            </div>
          </div>
          <div class="card">
            <div class="card-header" id="headingSix">
              <h5 class="">
                <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
                  How do I make reservation?
                </button>
              </h5>
            </div>
            <div id="collapseSix" class="collapse" aria-labelledby="headingSix" data-parent="#accordionExample">
              <div class="card-body">
                <div class="media">
                  <a href="#">
                    <img class="" src="assets/img/toggle/toggle-01.jpg" alt="Generic placeholder image">
                  </a>
              <div class="media-body">
                   <h5 class="text-uppercase">Story & History</h5>
                  <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
              </div>
            </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="accordion" id="accordionExampleRight">
            <div class="card">
              <div class="card-header" id="headingOne1">
                <h5 class="">
                     <button class="btn btn-link text-uppercase" type="button" data-toggle="collapse" data-target="#collapseOne1" aria-expanded="true" aria-controls="collapseOne1">
                      How can I manage Instant Book settings?
                    </button>
                </h5>
              </div>
              <div id="collapseOne1" class="collapse show" aria-labelledby="headingOne1" data-parent="#accordionExampleRight">
                <div class="card-body">
                    <div class="media">
                      <a href="#">
                        <img class="" src="assets/img/toggle/toggle-02.jpg" alt="Generic placeholder image">
                      </a>
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header" id="headingTwo1">
                <h5 class="">
                  <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseTwo1" aria-expanded="false" aria-controls="collapseTwo1">
                    How do I list multiple rooms?
                  </button> 
                </h5>
              </div>
              <div id="collapseTwo1" class="collapse" aria-labelledby="headingTwo1" data-parent="#accordionExampleRight">
                <div class="card-body">
                    <div class="media">
                      <a href="#">
                        <img class="" src="assets/img/toggle/toggle-02.jpg" alt="Generic placeholder image">
                      </a>
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header" id="headingThree1">
                <h5 class="">
                  <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseThree1" aria-expanded="false" aria-controls="collapseThree1">
                    How do I use my calendar?
                  </button> 
                </h5>
              </div>
              <div id="collapseThree1" class="collapse" aria-labelledby="headingThree1" data-parent="#accordionExampleRight">
                <div class="card-body">
                    <div class="media">
                      <a href="#">
                        <img class="" src="assets/img/toggle/toggle-02.jpg" alt="Generic placeholder image">
                      </a>
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header" id="headingFour1">
                <h5 class="">
                  <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseFour1" aria-expanded="false" aria-controls="collapseFour1">
                    How do I make reservation?
                  </button> 
                </h5>
              </div>
              <div id="collapseFour1" class="collapse" aria-labelledby="headingFour1" data-parent="#accordionExampleRight">
                <div class="card-body">
                    <div class="media">
                      <a href="#">
                        <img class="" src="assets/img/toggle/toggle-02.jpg" alt="Generic placeholder image">
                      </a>
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
                </div>
              </div>
            </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ====================================
———	TOGGLES SECTION
===================================== -->
<section class="">
  <div class="container">
    <div class="section-title text-uppercase text-center">
      <h2>Toggles</h2>
    </div>
    <div class="row">
      <div class="col-md-6">
        <div class="accordion" id="accordionExample2">
            <div class="card">
              <div class="card-header" id="headingOne2">
                <h5 class="">
                     <button class="btn btn-link text-uppercase" type="button" data-toggle="collapse" data-target="#collapseOne2" aria-expanded="true" aria-controls="collapseOne2">
                      How can I manage Instant Book settings?
                    </button>
                </h5>
              </div>
              <div id="collapseOne2" class="collapse show" aria-labelledby="headingOne2" data-parent="#accordionExample2">
                <div class="card-body">
                    <div class="media">
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header" id="headingTwo2">
                <h5 class="">
                  <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseTwo2" aria-expanded="false" aria-controls="collapseTwo2">
                    How do I list multiple rooms?
                  </button>
                </h5>
              </div>
              <div id="collapseTwo2" class="collapse" aria-labelledby="headingTwo2" data-parent="#accordionExample2">
                <div class="card-body">
                    <div class="media">
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header" id="headingThree2">
                <h5 class="">
                    <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseThree2" aria-expanded="false" aria-controls="collapseThree2">
                      How do I use my calendar?
                    </button>
                </h5>
              </div>
              <div id="collapseThree2" class="collapse" aria-labelledby="headingThree2" data-parent="#accordionExample2">
                <div class="card-body">
                    <div class="media">
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
              <div class="card-header" id="headingFour2">
                <h5 class="">
                    <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseFour2" aria-expanded="false" aria-controls="collapseFour2">
                      How do I use my calendar?
                    </button>
                </h5>
              </div>
              <div id="collapseFour2" class="collapse" aria-labelledby="headingFour2" data-parent="#accordionExample2">
                <div class="card-body">
                    <div class="media">
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
              <div class="card-header" id="headingFive2">
                <h5 class="">
                    <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseFive2" aria-expanded="false" aria-controls="collapseFive2">
                      How do I make reservation?
                    </button>
                </h5>
              </div>
              <div id="collapseFive2" class="collapse" aria-labelledby="headingFive2" data-parent="#accordionExample2">
                <div class="card-body">
                    <div class="media">
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
              <div class="card-header" id="headingSix2">
                <h5 class="">
                    <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseSix2" aria-expanded="false" aria-controls="collapseSix2">
                      How do I make reservation?
                    </button>
                </h5>
              </div>
              <div id="collapseSix2" class="collapse" aria-labelledby="headingSix2" data-parent="#accordionExample2">
                <div class="card-body">
                    <div class="media">
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="col-md-6">
        <div class="accordion" id="accordionExample3">
            <div class="card">
              <div class="card-header" id="headingOne3">
                <h5 class="">
                     <button class="btn btn-link text-uppercase" type="button" data-toggle="collapse" data-target="#collapseOne3" aria-expanded="true" aria-controls="collapseOne3">
                      How can I manage Instant Book settings?
                    </button>
                </h5>
              </div>
              <div id="collapseOne3" class="collapse show" aria-labelledby="headingOne3" data-parent="#accordionExample3">
                <div class="card-body">
                    <div class="media">
                      <a href="#">
                        <img class="" src="assets/img/toggle/toggle-02.jpg" alt="Generic placeholder image">
                      </a>
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header" id="headingTwo3">
                <h5 class="">
                  <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseTwo3" aria-expanded="false" aria-controls="collapseTwo3">
                    How do I list multiple rooms?
                  </button>
                </h5>
              </div>
              <div id="collapseTwo3" class="collapse" aria-labelledby="headingTwo3" data-parent="#accordionExample3">
                <div class="card-body">
                    <div class="media">
                      <a href="#">
                        <img class="" src="assets/img/toggle/toggle-02.jpg" alt="Generic placeholder image">
                      </a>
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
                </div>
              </div>
            </div>
            <div class="card">
              <div class="card-header" id="headingThree3">
                <h5 class="">
                    <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseThree3" aria-expanded="false" aria-controls="collapseThree3">
                      How do I use my calendar?
                    </button>
                </h5>
              </div>
              <div id="collapseThree3" class="collapse" aria-labelledby="headingThree3" data-parent="#accordionExample3">
                <div class="card-body">
                    <div class="media">
                      <a href="#">
                        <img class="" src="assets/img/toggle/toggle-02.jpg" alt="Generic placeholder image">
                      </a>
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="card">
              <div class="card-header" id="headingFour3">
                <h5 class="">
                    <button class="btn btn-link collapsed text-uppercase" type="button" data-toggle="collapse" data-target="#collapseFour3" aria-expanded="false" aria-controls="collapseFour3">
                      How do I use my calendar?
                    </button>
                </h5>
              </div>
              <div id="collapseFour3" class="collapse" aria-labelledby="headingFour3" data-parent="#accordionExample3">
                <div class="card-body">
                    <div class="media">
                      <a href="#">
                        <img class="" src="assets/img/toggle/toggle-02.jpg" alt="Generic placeholder image">
                      </a>
                  <div class="media-body">
                       <h5 class="text-uppercase">Story & History</h5>
                      <p>Lorem ipsum dolor sit amet, consectetur adipis icing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.Lorem ipsum dolor sit amet.</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>


@@include('footer.htm')