<?php
get_header(); ?>
<main>
  <section
    class="hero-section bg-dotted home-section d-flex align-items-center min-vh-100 bg-white text-center position-relative"
    style="height: calc(100vh - 200px);">
    <div class="container">
      <!-- Main Title -->
      <h1 class="display-5 fw-bold mb-3">فرهنگ در آینه‌ی آموزش</h1>
      <!-- Subtitle/Description -->
      <p class="lead mb-5">
        برگزاری دوره‌های آموزشی مجازی و حضوری، و سفرهای آموزشی درباره‌ی<br>
        تاریخ و تئوری و نقد معماری و هنر، هنر ایران، مطالعات فرهنگی، تفکر انتقادی، ایران‌پژوهی، تاریخ، زبان و ادب فارسی،
        علوم انسانی
      </p>
      <!-- Icon rows -->
      <div class="row text-center justify-content-center">
        <!-- Registration 1 -->
        <div class="col-12 col-md-4 mb-4 mb-md-0">
          <i class="bi bi-mic display-4 fw-bold text-nowruzgan"></i>
          <div class="mt-3 fw-bold fs-5">
            ثبت نام در سخنرانی‌ها و هم‌اندیشی‌ها
          </div>
        </div>
        <!-- Registration 2 -->
        <div class="col-12 col-md-4 mb-4 mb-md-0">
          <i class="bi bi-geo-alt-fill  display-4 fw-bold text-nowruzgan"></i>
          <div class="mt-3 fw-bold fs-5">
            ثبت نام در برنامه‌ی سفر
          </div>
        </div>
        <!-- Registration 3 -->
        <div class="col-12 col-md-4">
          <i class="bi bi-bookmark-fill display-4 fw-bold text-nowruzgan"></i>
          <div class="mt-3 fw-bold fs-5">
            ثبت نام در کلاس‌های جاری
          </div>
        </div>
      </div>
    </div>
  </section>
  <section id="offline-section" class=" d-flex align-items-center min-vh-100 bg-white position-relative">
    <div class="container-fluid">
      <div class="row align-items-center">
        <div class="col-md-6 mb-4 mb-md-0">
          <img src="<?php echo get_stylesheet_directory_uri(); ?>/inc/grid3.png" alt="کلاس‌های حضوری"
            class="img-fluid">
        </div>
        <div class="col-md-6">
          <h2 class="fw-bold mb-3">
            دوره‌های برون‌خط (آفلاین)
          </h2>
          <p class="mb-4">
            دوره‌های برون‌خط جاری و برگزارشده در اینجا در دسترس شماست.
          </p>
          <a href="#" class="btn mb-2 btn-nowruzgan rounded-pill">جستجو دوره‌ها</a><br>
          <a class="fw-bold" href="#">ثبت نام در دوره‌های برون‌خط</a>
        </div>
      </div>
    </div>
  </section>
  <section id="inperson-section" class="d-flex align-items-center min-vh-100 bg-dark text-white position-relative">
    <div class="container-fluid">
      <div class="row align-items-center">
        <div class="col-md-6 mb-4 mb-md-0">
          <!-- <img src="<?php echo get_stylesheet_directory_uri(); ?>/inc/grid3.png" alt="دوره‌های جاری" -->
            <!-- class="img-fluid"> -->
        </div>
        <div class="col-md-6">
          <h2 class="fw-bold mb-3">
            دوره‌های جاری
          </h2>
          <p class="mb-4">
            به دوره‌های جاری حضوری یا مجازی بپیوندید.
          </p>
          <a href="#" class="btn mb-2 rounded-pill btn-nowruzgan">ثبت‌نام در دوره‌های حضوری</a><br>
          <a class="fw-bold" href="#">ثبت‌نام در دوره‌های مجازی</a>
        </div>
      </div>
    </div>
  </section>
  <section class="py-5 bg-white text-center">
    <div class="container py-4">
      <div class="row justify-content-center">
        <div class="col-lg-10">

          <!-- Section Title -->
          <h2 class="fw-bold mb-4 display-6">چرا نوروزگان؟</h2>
          <div class="row justify-content-center pt-3">
            <!-- First Column -->
            <div class="col-12 col-md-4 mb-4 mb-md-0">
              <!-- Icon (replace with your SVG or Bootstrap Icon) -->
              <div class="mb-3">
                <img class="whyus-img" decoding="async"
                  src="<?php echo get_stylesheet_directory_uri(); ?>/inc/pen.png" alt="">
              </div>
              <div class="mb-2">
                با ارتقاءِ معرفت خود و دیگران، به بهتر شدن جهان و انسان‌ها کمک کنیم
              </div>
              <a href="#" class="fw-bold">سفرها</a>
            </div>
            <!-- Second Column -->
            <div class="col-12 col-md-4 mb-4 mb-md-0">
              <div class="mb-3">
                <img class="whyus-img" decoding="async"
                  src="<?php echo get_stylesheet_directory_uri(); ?>/inc/pot.png" alt="">
              </div>
              <div class="mb-2">
                بیاموزیم که به فرهنگ مادی و غیرمادی چگونه بنگریم و آثار آن را چگونه تفسیر کنیم.
              </div>
              <a href="#" class="fw-bold" style="color:#38b8b8; text-decoration:none;">سخنرانی‌ها و گفت‌وگوها</a>
            </div>
            <!-- Third Column -->
            <div class="col-12 col-md-4">
              <div class="mb-3">
                <img class="whyus-img" decoding="async"
                  src="<?php echo get_stylesheet_directory_uri(); ?>/inc/torch.png" alt="">
              </div>
              <div class="mb-2">
                بیاموزیم که چگونه بیندیشیم و بنویسیم
              </div>
              <a href="#" class="fw-bold" style="color:#38b8b8; text-decoration:none;">دوره‌ها</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <section id="travel-section" class="bg-dotted bg-travel d-flex align-items-center min-vh-100 position-relative">
    <div class="container">
      <div class="row align-items-center">

        <div class="col-md-6" style="z-index: 4;">
          <h2 class="fw-bold mb-3">
            سفرها و گردش‌های آموزشی
          </h2>
          <ul class="mb-4">
            <li class="">سفر آموزشی در ایران و جهان ایرانی همراه با مدرسان زبده ما را مستقیماً در معرض محیط‌ها
              و فضاها قرار می‌دهد و کمک می‌کند درکی مکانمند از تاریخ و فرهنگ، در بستر فعالیتی جمعی و دل‌نشین،
              به دست آوریم.</li>
            <li class="">شهرگردی، از جمله تهران‌گردی، ما را با عمق تاریخی نقاط گوناگون شهر آشنا می‌کند و به
              محیطمان را در نزد ما معنادار می‌کند.</li>
            <li class="">موزه‌گردی همراه با راهنمایان کارآزموده و هنرشناسْ ما را به گردش در میان آفریده‌های
              انسان‌های گذشته می‌برد و ساخته‌های آنان را برای ما در سیاق تاریخ و فرهنگ ایران می‌نشاند.</li>
          </ul>
          <a href="#" class="btn float-end rounded-pill mb-2 btn-nowruzgan">جست‌وجو در سفرها و گردش‌های علمی</a><br>
        </div>
        <div class="col-md-6 mb-4 mb-md-0">
        </div>
      </div>
    </div>
  </section>
  <section class="d-flex align-items-center py-5 bg-white min-vh-100 position-relative">
    <div class="container">
      <div class="row align-items-center">
        <!-- TEXT AREA (Right in RTL, left in LTR) -->
        <div class="col-lg-6 mb-5 mb-lg-0">
          <h2 class="fw-bold mb-3 display-5">آشنایی با مدرسان</h2>
          <hr class="mb-3" style="border-color: #97bc42; border-width: 2px; width: 72px;">
          <p class="mb-4 lh-lg">
            مدرسه‌ی نوروزگان در دامنه‌ی فعالیت خود ــ از تاریخ و فرهنگ ایران تا مطالعات فرهنگی و علوم انسانی ــ از
            بهترین مدرسان داخل و خارج ایران بهره می‌گیرد.

          </p>
          <a href="#" class="btn btn-nowruzgan rounded-pill px-5 py-2 fw-bold">مشاهده مدرسان</a>
        </div>
        <div class="col-lg-6">
          <div class="d-flex flex-wrap justify-content-center gap-3">
            <img src="https://nowruzgan.com/images/qayyoomi.jpg" class="rounded-circle object-fit-cover"
              style="width: 110px; height: 110px; object-fit: cover;" alt="قیومی">
            <img src="https://nowruzgan.com/images/najafi.jpg" class="rounded-circle object-fit-cover"
              style="width: 110px; height: 110px; object-fit: cover;" alt="نجفی">
            <img src="https://nowruzgan.com/images/yasini.jpg" class="rounded-circle object-fit-cover"
              style="width: 110px; height: 110px; object-fit: cover;" alt="فلاح">
            <img src="https://nowruzgan.com/images/fallah.jpg" class="rounded-circle object-fit-cover"
              style="width: 110px; height: 110px; object-fit: cover;" alt="مدرس ۴">
            <img src="https://nowruzgan.com/images/sina.jpg" class="rounded-circle object-fit-cover"
              style="width: 110px; height: 110px; object-fit: cover;" alt="مدرس ۵">
            <!-- Add more if desired -->
            <div
              class="rounded-circle border-dashed fw-bold text-nowruzgan d-flex align-items-center justify-content-center"
              style="width: 110px; height: 110px;">
              + سایر اساتید
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
  <section
    class="bg-sunscribe bg-dotted d-flex align-items-center py-5 text-center position-relative">
    <div class="container py-4 my-5" style="z-index: 4;">
      <h1 class="display-6 fw-bold mb-3">اطلاع از برنامه‌ها و رویدادها</h1>
      <p class="lead">
        برنامه‌ی دوره‌ها، سفرها و گردش‌ها، سخنرانی‌ها و رویدادها را از طریق ایمیل دریافت کنید
      </p>
      <div class="row text-center justify-content-center">
        <div class="col-8 col-md-6 mb-4 mb-md-0" style="z-index: 4;">
          <div class="input-group mb-3">
            <input type="text" class="form-control" placeholder="آدرس ایمیل" aria-label="Email address"
              aria-describedby="button-addon2">
            <button class="btn btn-nowruzgan" type="button" id="button-addon2">اشتراک</button>
          </div>
        </div>
      </div>
    </div>
  </section>
</main>

<?php get_footer(); ?>