@extends('layouts.app')

@section('content')

<div id="smooth-wrapper">
      <div id="smooth-content">

<main>
            <div class="it-hero-3-area pt-0">
                <div class="swiper hero-slider">
                   <div class="swiper-wrapper">
                     <!-- Slide 1 -->
                     <div class="swiper-slide">
                        <div class="it-hero-2-overlay fix gray-bg z-index-1" style="background-image: url('assets/img/hero/1.jpg');background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;min-height: 20vh;margin-top: 150px;">
                           <div class="container">
                              <div class="row align-items-center">
                                 <div class="col-xl-6 col-lg-6">
                                    <div class="it-hero-2-content">
                                       <h4 class="it-hero-3-subtitle it-split-in-right">
                                          <span>الجمهورية التونسية</span>
                                       </h4>
                                       <h1 class="it-hero-2-title it-split-in-right">
                                          وزارة الشباب والرياضة
                                       </h1>
                                       <h4 class="it-hero-2-subtitle it-split-in-right" style="color:#fff;">
                                          مركبات ومراكز إقامة الشباب في تونس
                                       </h4>
                                       <div class="it-hero-2-text wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                                          <p class="mb-30"><br/></p>
                                       </div>
                                       <div class="it-hero-btn d-sm-flex align-items-center">
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay=".8">
                                             <a href="contact.html" class="it-btn-orange mr-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                                <span>
                                                   <span class="text-1">إتصل بنا</span>
                                                   <span class="text-2">إتصل بنا</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                             <a href="service.html" class="it-btn-border wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".9s">
                                                <span>
                                                   <span class="text-1">آخر الأخبار</span>
                                                   <span class="text-2">آخر الأخبار</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="col-xl-6 col-lg-6">
                                    <form class="booking-form">
                                       <h4 class="it-contact-form-title mb-10" style="color:#FFFFFF;">حجز الإقامة</h4>
                                       <div class="row">
                                          <div class="col-md-6 mb-3">
                                             <label>اختر الدار</label>
                                             <select class="form-select">
                                                <option selected>اختر دار الشباب</option>
                                                <option>دار الشباب 1</option>
                                                <option>دار الشباب 2</option>
                                                <option>دار الشباب 3</option>
                                             </select>
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>عدد الأماكن</label>
                                             <input type="number" class="form-control" min="1" max="10">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ الوصول</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ المغادرة</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-12 mb-3">
                                             <label>نوع الإقامة</label>
                                             <select class="form-select">
                                                <option selected>اختر نوع الإقامة</option>
                                                <option>إقامة كاملة</option>
                                                <option>نصف إقامة</option>
                                                <option>إقامة بدون وجبات</option>
                                             </select>
                                          </div>
                                          <div class="col-12">
                                             <button type="submit" class="it-btn-orange">احجز الآن</button>
                                          </div>
                                       </div>
                                    </form>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                     <!-- Slide 2 -->
                     <div class="swiper-slide">
                        <div class="it-hero-2-overlay fix gray-bg z-index-1" style="background-image: url('assets/img/hero/2.jpg');background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;min-height: 20vh;margin-top: 150px;">
                           <div class="container">
                              <div class="row align-items-center">
                                 <div class="col-xl-6 col-lg-6">
                                    <div class="it-hero-2-content">
                                       <h4 class="it-hero-3-subtitle it-split-in-right">
                                          <span>الجمهورية التونسية</span>
                                       </h4>
                                       <h1 class="it-hero-2-title it-split-in-right">
                                          وزارة الشباب والرياضة
                                       </h1>
                                       <h4 class="it-hero-2-subtitle it-split-in-right" style="color:#fff;">
                                         مركبات ومراكز إقامة الشباب في تونس
                                       </h4>
                                       <div class="it-hero-2-text wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                                          <p class="mb-30"><br/></p>
                                       </div>
                                       <div class="it-hero-btn d-sm-flex align-items-center">
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay=".8">
                                             <a href="contact.html" class="it-btn-orange mr-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                                <span>
                                                   <span class="text-1">إتصل بنا</span>
                                                   <span class="text-2">إتصل بنا</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                             <a href="service.html" class="it-btn-border wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".9s">
                                                <span>
                                                   <span class="text-1">آخر الأخبار</span>
                                                   <span class="text-2">آخر الأخبار</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="col-xl-6 col-lg-6">
                                    <form class="booking-form">
                                       <h4 class="it-contact-form-title mb-10" style="color:#FFFFFF;">حجز الإقامة</h4>
                                       <div class="row">
                                          <div class="col-md-6 mb-3">
                                             <label>اختر الدار</label>
                                             <select class="form-select">
                                                <option selected>اختر دار الشباب</option>
                                                <option>دار الشباب 1</option>
                                                <option>دار الشباب 2</option>
                                                <option>دار الشباب 3</option>
                                             </select>
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>عدد الأماكن</label>
                                             <input type="number" class="form-control" min="1" max="10">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ الوصول</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ المغادرة</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-12 mb-3">
                                             <label>نوع الإقامة</label>
                                             <select class="form-select">
                                                <option selected>اختر نوع الإقامة</option>
                                                <option>إقامة كاملة</option>
                                                <option>نصف إقامة</option>
                                                <option>إقامة بدون وجبات</option>
                                             </select>
                                          </div>
                                          <div class="col-12">
                                             <button type="submit" class="it-btn-orange">احجز الآن</button>
                                          </div>
                                       </div>
                                    </form>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
          <div class="swiper-slide">
                        <div class="it-hero-2-overlay fix gray-bg z-index-1" style="background-image: url('assets/img/hero/3.jpg');background-size: cover;background-position: center;background-repeat: no-repeat;position: relative;min-height: 20vh;margin-top: 150px;">
                           <div class="container">
                              <div class="row align-items-center">
                                 <div class="col-xl-6 col-lg-6">
                                    <div class="it-hero-2-content">
                                       <h4 class="it-hero-3-subtitle it-split-in-right">
                                          <span>الجمهورية التونسية</span>
                                       </h4>
                                       <h1 class="it-hero-2-title it-split-in-right">
                                          وزارة الشباب والرياضة
                                       </h1>
                                       <h4 class="it-hero-2-subtitle it-split-in-right" style="color:#fff;">
                                         مركبات ومراكز إقامة الشباب في تونس
                                       </h4>
                                       <div class="it-hero-2-text wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".5s">
                                          <p class="mb-30"><br/></p>
                                       </div>
                                       <div class="it-hero-btn d-sm-flex align-items-center">
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay=".8">
                                             <a href="contact.html" class="it-btn-orange mr-30 wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".7s">
                                                <span>
                                                   <span class="text-1">إتصل بنا</span>
                                                   <span class="text-2">إتصل بنا</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                          <div class="it-fade-anim" data-fade-from="top" data-ease="bounce" data-delay="1">
                                             <a href="service.html" class="it-btn-border wow itfadeUp" data-wow-duration=".9s" data-wow-delay=".9s">
                                                <span>
                                                   <span class="text-1">آخر الأخبار</span>
                                                   <span class="text-2">آخر الأخبار</span>
                                                </span>
                                                <i>
                                                   <svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
                                                      <path d="M10.0035 3.90804L1.41153 12.5L0 11.0885L8.59097 2.49651H1.01922V0.5H12V11.4808H10.0035V3.90804Z" fill="white" />
                                                   </svg>
                                                </i>
                                             </a>
                                          </div>
                                       </div>
                                    </div>
                                 </div>
                                 <div class="col-xl-6 col-lg-6">
                                    <form class="booking-form">
                                       <h4 class="it-contact-form-title mb-10" style="color:#FFFFFF;">حجز الإقامة</h4>
                                       <div class="row">
                                          <div class="col-md-6 mb-3">
                                             <label>اختر الدار</label>
                                             <select class="form-select">
                                                <option selected>اختر دار الشباب</option>
                                                <option>دار الشباب 1</option>
                                                <option>دار الشباب 2</option>
                                                <option>دار الشباب 3</option>
                                             </select>
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>عدد الأماكن</label>
                                             <input type="number" class="form-control" min="1" max="10">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ الوصول</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-md-6 mb-3">
                                             <label>تاريخ المغادرة</label>
                                             <input type="date" class="form-control">
                                          </div>
                                          <div class="col-12 mb-3">
                                             <label>نوع الإقامة</label>
                                             <select class="form-select">
                                                <option selected>اختر نوع الإقامة</option>
                                                <option>إقامة كاملة</option>
                                                <option>نصف إقامة</option>
                                                <option>إقامة بدون وجبات</option>
                                             </select>
                                          </div>
                                          <div class="col-12">
                                             <button type="submit" class="it-btn-orange">احجز الآن</button>
                                          </div>
                                       </div>
                                    </form>
                                 </div>
                              </div>
                           </div>
                        </div>
                     </div>
                    
		  </div>
                  <!-- Add Pagination -->
                  <div class="swiper-pagination"></div>
                  <!-- Add Navigation -->
                  <div class="swiper-button-next"></div>
                  <div class="swiper-button-prev"></div>
               </div>
            </div>

 
            <section class="about-section pt-100 pb-70" style="background:ghostwhite;">
         <div class="container">
            <div class="row align-items-center">
               <div class="col-lg-6 mb-30">
                  <div class="about-content">
				    <div class="it-section-title-box mb-20">
                              <span class="it-section-subtitle">خدمة دور الشباب</span>
                           
                           </div>
                     <div class="it-about-2-text">
                              <p class="mb-30">
                     <p>نقدم لكم خدمة حجز دور الشباب في جميع أنحاء البلاد. توفر دور الشباب إقامة مريحة وبأسعار معقولة للشباب والعائلات. تتميز دورنا بموقعها الاستراتيجي وخدماتها المتنوعة.</p>
                     <p>نوفر:</p>
                     <ul class="list-unstyled">
                        <li><i class="fas fa-check"></i> غرف مجهزة بالكامل</li>
                        <li><i class="fas fa-check"></i> خدمة الإطعام</li>
                        <li><i class="fas fa-check"></i> مرافق رياضية وترفيهية</li>
                        <li><i class="fas fa-check"></i> أسعار تنافسية</li>
                     </ul>
					 </p></div>
                  </div>
               </div>
               <div class="col-lg-6 mb-30">
                  <div class="map-container" style="position: relative;">
                     <img src="assets/img/faq/map.jpg" alt="خريطة دور الشباب" class="img-fluid" style="width: 100%; height: auto;">
                     <div id="map-points"></div>
                  </div>
               </div>
            </div>
         </div>
      </section>
   </main>
</div>
</div>

@endsection