صفحه اصلی/دسته بندی - فراغیب

<html>
<!-- بخش استایل‌های اختصاصی و واکنش‌گرا -->
<style>
  .wiki-province-container {
    direction: rtl;
    margin: 5px auto;
    max-width: 1200px;
    padding: 10px;
  }
  .wiki-province-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 15px !important;
  }
  .wiki-province-card {
    background: #ffffff;
    border: 1.5px solid #8ee0d8; /* رنگ پایه با ۲۵ درصد روشنایی بیشتر */
    border-radius: 8px;
    padding: 15px 5px;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
    transition: all 0.3s ease;
    cursor: pointer;
    color: #2d3748;
    font-weight: 600;
    /* استفاده از clamp برای تغییر اندازه فونت پویا بین 14px تا 17px متناسب با عرض صفحه */
    font-size: clamp(14px, 1.2vw, 17px) !important;
    
    /* جلوگیری از شکستن متن و دوخطی شدن */
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
  }
  .wiki-province-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(101, 195, 186, 0.15);
    border-color: #65c3ba; /* تغییر رنگ به رنگ پایه در حالت هاور */
    color: #65c3ba;
  }
  /* تنظیمات نمایشگر موبایل و تبلت‌های کوچک */
  @media (max-width: 768px) {
    .wiki-province-grid {
      grid-template-columns: repeat(2, 1fr) !important; /* ۲ کادر در هر ردیف */
      gap: 10px !important;
    }
    .wiki-province-card {
      padding: 12px 4px !important;
      /* در موبایل اندازه فونت به صورت پویا با توجه به عرض صفحه بین 10.5px تا 14.5px تغییر می‌کند */
      font-size: clamp(10.5px, 3.5vw, 14.5px) !important;
    }
  }
</style>
<!-- بدنه اصلی ساختار دسته‌بندی استان‌ها -->
<div class="wiki-province-container">
    <div style="text-align: center; margin-bottom: 15px;">
        <h2 style="color: #2c3e50; border-bottom: 2px solid #65c3ba; display: inline-block; padding-bottom: 10px; font-weight: bold; font-size: 24px;"> خدمات فراغیب</h2>    </div>
<div class="wiki-province-container">
  <div class="wiki-province-grid">
    <a class="wiki-province-card" href="/wiki/آموزشگاه ">آموزشگاه </a>
    <a class="wiki-province-card" href="/wiki/دوره های آموزشی">دوره های آموزشی</a>
    <a class="wiki-province-card" href="/wiki/مشاغل">مشاغل</a>
    <a class="wiki-province-card" href="/wiki/موسیقی">موسیقی</a>

    <a class="wiki-province-card" href="/wiki/کتابخانه">کتابخانه</a>
    <a class="wiki-province-card" href="/wiki/ویدیو">ویدیو</a>
    <a class="wiki-province-card" href="/wiki/عکس">عکس</a>
    <a class="wiki-province-card" href="/wiki/بازی">بازی</a>

    <a class="wiki-province-card" href="/wiki/سینما">سینما</a>
    <a class="wiki-province-card" href="/wiki/ورزش">ورزش</a>
    <a class="wiki-province-card" href="/wiki/خبرگزاری">خبرگزاری</a>
    <a class="wiki-province-card" href="/wiki/اپلیکیشن">اپلیکیشن</a>

    <a class="wiki-province-card" href="/wiki/کافی نت">کافی نت</a>
    <a class="wiki-province-card" href="/wiki/کاریابی">کاریابی</a>
    <a class="wiki-province-card" href="/wiki/اینستاگرام">اینستاگرام</a>
    <a class="wiki-province-card" href="/wiki/کانال های اجتماعی">کانال های اجتماعی</a>

  </div>
</div>

</html>