@extends('layouts.app')
@section('content')
<div id="smooth-wrapper">
   <div id="smooth-content">
      <main>
         <div class="it-hero-2-area pt-0">
            <div class="it-hero-2-overlay fix gray-bg z-index-1" data-background="assets/img/project/beja.webp">
               <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>
                                    <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>
                                          <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="it-about-2-area p-relative pt-0 pb-45">
                <div class="it-project-3-area pt-65 pb-45"  style="background:white;">
               <div class="container">
                  <div class="row">
                     <div class="col-xl-12">
                        <div class="it-section-title-box text-center mb-65">
                           <span class="it-section-subtitle">مركبات و مراكز اقامة الشباب في تونس</span>
                           <h4 class="it-section-title it-split-in-right mb-0">ولاية باجة</h4>
                        </div>
                     </div>
                  </div>
               <div class="container">
                  <div class="row align-items-center">
                     <div class="col-xl-6 col-lg-6">
                        <div class="it-project-2-item mb-30">
                           <div class="it-project-2-thumb fix it-img-anim-wrap p-relative">
                              <div class="it-about-thumb it-img-anim" data-displacement="assets/img/webgl/pattern-1.jpg"
                                 data-intensity="0.6" data-speedin="1" data-speedout="1">
                                 <img class="w-100" src="assets/img/project/beja.jpg" alt="">
                              </div>
                           </div>
                           
                        </div>
                     </div>
                     <div class="col-xl-6 col-lg-6">
                              <div class="it-about-2-text">
                              <p class="mb-30">تباجة، هي منطقة ذات صبغة زراعية، يعود تاريخها إلى العصر الروماني. انت تعتبر مطمورة روما. فبالإضافة إلى إنتاجها من الحبوب، تشتهر المنطقة بزراعة الكروم )التي أدخلها الآباء البيض(، وإنتاج الزيتون )بما في ذلك صنف «شتوي » المشهور عالميًا، والمعروف بمحتواه العالي من البوليفينولات(.

</p>

                     </div></div>    <div class="row align-items-center">
					  <div class="col-xl-6 col-lg-6">
                            <div class="it-about-2-text">  <p class="mb-30">باجة، هي منطقة ذات صبغة زراعية، يعود تاريخها إلى العصر الروماني. انت تعتبر مطمورة روما. فبالإضافة إلى إنتاجها من الحبوب، تشتهر المنطقة بزراعة الكروم )التي أدخلها الآباء البيض(، وإنتاج الزيتون )بما في ذلك صنف «شتوي » المشهور عالميًا، والمعروف بمحتواه العالي من البوليفينولات(.

</p>

                     </div></div>
					  <div class="col-xl-6 col-lg-6">
                        <div class="it-project-2-item mb-30">
                           <div class="it-project-2-thumb fix it-img-anim-wrap p-relative">
                              <div class="it-about-thumb it-img-anim" data-displacement="assets/img/webgl/pattern-1.jpg"
                                 data-intensity="0.6" data-speedin="1" data-speedout="1">
                                 <img class="w-100" src="assets/img/project/beja1.jpg" alt="">
                              </div>
                           </div>
                           
                        </div>
                     </div>
                  </div>
				  <div class="row align-items-center">
					  
					  <div class="col-xl-6 col-lg-6">
                        <div class="it-project-2-item mb-30">
                           <div class="it-project-2-thumb fix it-img-anim-wrap p-relative">
                              <div class="it-about-thumb it-img-anim" data-displacement="assets/img/webgl/pattern-1.jpg"
                                 data-intensity="0.6" data-speedin="1" data-speedout="1">
                                 <img class="w-100" src="assets/img/project/beja2.jpg" alt="">
                              </div>
                           </div>
                           
                        </div>
                     </div>
					 <div class="col-xl-6 col-lg-6">
                             <div class="it-about-2-text"> <p class="mb-30">باجة، هي منطقة ذات صبغة زراعية، يعود تاريخها إلى العصر الروماني. انت تعتبر مطمورة روما. فبالإضافة إلى إنتاجها من الحبوب، تشتهر المنطقة بزراعة الكروم )التي أدخلها الآباء البيض(، وإنتاج الزيتون )بما في ذلك صنف «شتوي » المشهور عالميًا، والمعروف بمحتواه العالي من البوليفينولات(.

</p>

                     </div></div>
                  </div>
               </div>
            </div>
            
 </div>
     
            <div class="it-project-3-area pt-65 pb-45"  style="background:ghostwhite;">
               <div class="container">
                  <div class="row">
                     <div class="col-xl-12">
                        <div class="it-section-title-box text-center mb-65">
                           <span class="it-section-subtitle">مركبات و مراكز اقامة الشباب في تونس</span>
                           <h4 class="it-section-title it-split-in-right mb-0">مركبات الشباب في تونس… اكتشف واحجز مباشرة</h4>
                        </div>
                     </div>
                  </div>
			
       
                  <div class="row">
                     <div class="col-12">
                        <div class="it-project-3-wrapper p-relative">
                           <div class="swiper-container it-project-3-active">
                              <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="luxury-room-card p-relative">
                                   
                                        <div class="room-thumb">
                                            <img class="w-100" src="assets/img/project/zouaree.jpg" alt="مركز التخييم والاصطياف بالزوارع">
                                        </div>
                                        <div class="room-content">
                                         
                                            <h4 class="room-title">
                                                <a href="portfolio-details.html">مركز التخييم والاصطياف بالزوارع</a>
                                            </h4>
                                            <div class="room-meta">
                                                <span><i class="fas fa-bed"></i> 50 سريرا تحت الخيام</span>
                                            
                                            </div>
                                            <div class="room-features">
                                                <div class="feature">
                                                    <i class="fas fa-utensils"></i>
                                                    <span>فطور صباح وجبة غداء عشاء أكلة تنزه</span>
                                                </div>
                                                <div class="feature">
                                                    <i class="fas fa-car"></i>
                                                    <span>مأوى</span>
                                                </div>
                                            </div>
                                            <div class="room-contact">
                                                <i class="fas fa-phone"></i> +21697218046
                                                <i class="fas fa-map-marker-alt"></i> وشتاتة، 9000 باجة
                                            </div>
                                            <a class="book-now-btn" href="{{ route('auberge') }}">
                                                إحجز الآن
                                                <i class="fas fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>
	 
				   						    <div class="swiper-slide">
                                    <div class="luxury-room-card p-relative">
                                   
                                        <div class="room-thumb">
                                            <img class="w-100" src="assets/img/project/maisonbeja.jpg" alt="المركب الشبابي بالكاف">
                                        </div>
                                        <div class="room-content">
                                         
                                            <h4 class="room-title">
                                                <a href="portfolio-details.html">المركب الشبابي بباجة</a>
                                            </h4>
                                            <div class="room-meta">
                                                <span><i class="fas fa-bed"></i>44 سريرا</span>
                                                
                                            </div>
                                            <div class="room-features">
                                                <div class="feature">
                                                    <i class="fas fa-utensils"></i>
                                                    <span>فطور صباح الغداء العشاء</span>
                                                </div>
                                                <div class="feature">
                                                    <i class="fas fa-wifi"></i>
                                                    <span>WIFI</span>
													<span><i class="fas fa-utensils"></i>مطبخ مستقل</span>
                                                </div>
												
                                            </div>
                                            <div class="room-contact">
                                                <i class="fas fa-phone"></i> +21678201214
                                                <i class="fas fa-map-marker-alt"></i>نهج البيئة  9000 باجة  تونس
                                            </div>
                                            <a class="book-now-btn" href="portfolio-details.html">
                                                إحجز الآن
                                                <i class="fas fa-arrow-right"></i>
                                            </a>
                                        </div>
                                    </div>
                                </div>		
							
								
				</div>
                          
						  </div>
                           <div class="it-project-arrow-wrap d-none d-xl-block">
                              <button class="arrow-prev">
                                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                       d="M0.292892 7.29289C-0.0976315 7.68342 -0.0976315 8.31658 0.292892 8.70711L6.65685 15.0711C7.04738 15.4616 7.68054 15.4616 8.07107 15.0711C8.46159 14.6805 8.46159 14.0474 8.07107 13.6569L2.41421 8L8.07107 2.34315C8.46159 1.95262 8.46159 1.31946 8.07107 0.928932C7.68054 0.538408 7.04738 0.538408 6.65685 0.928932L0.292892 7.29289ZM16 7H0.999999V9H16V7Z"
                                       fill="currentcolor" />
                                 </svg>
                              </button>
                              <button class="arrow-next">
                                 <svg width="16" height="16" viewBox="0 0 16 16" fill="none"
                                    xmlns="http://www.w3.org/2000/svg">
                                    <path
                                       d="M15.7071 8.70711C16.0976 8.31658 16.0976 7.68342 15.7071 7.29289L9.34315 0.928932C8.95262 0.538408 8.31946 0.538408 7.92893 0.928932C7.53841 1.31946 7.53841 1.95262 7.92893 2.34315L13.5858 8L7.92893 13.6569C7.53841 14.0474 7.53841 14.6805 7.92893 15.0711C8.31946 15.4616 8.95262 15.4616 9.34315 15.0711L15.7071 8.70711ZM0 9H15V7H0V9Z"
                                       fill="currentcolor" />
                                 </svg>
                              </button>
                           </div>
                        </div>
                        <div class="it-project-3-dots text-center mt-55"></div>
                     </div>
                  </div>
				 
               </div>
            </div>
            
      <section class="about-section pt-100 pb-70">
         <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