<!DOCTYPE html>
<html lang="fa">

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="keywords" content="HTML5,CSS3,HTML,Template,multi-page,Raque - Education &amp; LMS HTML Template">
  <meta name="description" content="Raque - Education &amp; LMS HTML Template">
  <meta name="author" content="Barat Hadian">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <meta name="mobile-web-app-capable" content="yes">
  <meta charset="utf-8"/>

  <meta name="enamad" content="643309"/>

  <title>TAVAN | توان</title>

  <link rel="icon" type="favicon" href="favicon.ico">
  <link rel="stylesheet" href="assets/styles/rtl.css">

  <base href="/"/>
  <meta name="viewport" content="width=device-width, initial-scale=1"/>
  <link rel="shortcut icon" href="./favicon.ico"/>
  <link rel="apple-touch-icon" sizes="76x76" href="./apple-icon.png"/>

  <style>
    html, body {
      overflow-x: hidden;
    }
    app-root header,
    app-root .navbar,
    app-root .main-header,
    app-root nav.navbar,
    app-root .header-area,
    app-root .top-area,
    app-root .header {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      z-index: 999998;
      background: #ffffff;
      box-shadow: 0 2px 6px rgba(0,0,0,0.08);
    }
    app-root > *:first-child {
      padding-top: 0;
    }
  </style>
<link rel="stylesheet" href="styles.fddaaf90017af739e3a2.css"></head>

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-YW79T4SJP4"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-YW79T4SJP4');
</script>
<body class="text-gray-800 antialiased">
  <app-root></app-root>
  <div id="tavan-hero-overlay" class="tavan-hero-overlay">
    <div class="tavan-hero-bg"></div>
    <div class="tavan-hero-content">
      <div class="tavan-hero-badge">آکادمی تخصصی فیزیوتراپی</div>
      <h1 class="tavan-hero-title">یادگیری حرفه‌ای فیزیوتراپی،<br>با بهترین اساتید کشور</h1>
      <p class="tavan-hero-subtitle">بیش از ۱۹۴ دوره آموزشی تخصصی، از پایه تا پیشرفته، در دسترس شما</p>
      <div class="tavan-hero-actions">
        <a href="#/courses" class="tavan-btn-primary">مشاهده دوره‌ها</a>
        <a href="#/teachers" class="tavan-btn-ghost">اساتید ما ←</a>
      </div>
      <div class="tavan-hero-stats">
        <div class="tavan-stat">
          <div class="tavan-stat-number">۱۹۴+</div>
          <div class="tavan-stat-label">دوره تخصصی</div>
        </div>
        <div class="tavan-stat">
          <div class="tavan-stat-number">۸۴</div>
          <div class="tavan-stat-label">استاد برتر</div>
        </div>
        <div class="tavan-stat">
          <div class="tavan-stat-number">۷۰۰۰+</div>
          <div class="tavan-stat-label">دانشجو</div>
        </div>
      </div>
    </div>
  </div>
  <style id="tavan-hero-styles">
    .tavan-hero-overlay {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 10000;
      overflow: hidden;
      font-family: Vazir, Tahoma, sans-serif;
      direction: rtl;
    }
    .tavan-hero-bg {
      position: absolute;
      inset: 0;
      background:
        radial-gradient(circle at 20% 30%, rgba(120, 80, 220, 0.35) 0%, transparent 50%),
        radial-gradient(circle at 80% 70%, rgba(30, 150, 200, 0.35) 0%, transparent 50%),
        linear-gradient(135deg, #0a0a1f 0%, #1a0a2e 50%, #0a0a1f 100%);
    }
    .tavan-hero-bg::after {
      content: "";
      position: absolute;
      inset: 0;
      background-image:
        linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px);
      background-size: 50px 50px;
      pointer-events: none;
    }
    .tavan-hero-content {
      position: relative;
      z-index: 2;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      padding: 40px 20px;
      max-width: 1100px;
      margin: 0 auto;
      height: 100%;
      color: #fff;
    }
    .tavan-hero-badge {
      display: inline-block;
      padding: 8px 20px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: 50px;
      font-size: 14px;
      font-weight: 500;
      color: #d4af37;
      backdrop-filter: blur(10px);
      margin-bottom: 28px;
      letter-spacing: 0.5px;
    }
    .tavan-hero-title {
      font-size: clamp(2rem, 5vw, 4rem);
      font-weight: 800;
      line-height: 1.3;
      margin: 0 0 24px;
      background: linear-gradient(135deg, #ffffff 0%, #d4af37 50%, #ffffff 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      letter-spacing: -1px;
    }
    .tavan-hero-subtitle {
      font-size: clamp(1rem, 1.5vw, 1.25rem);
      color: rgba(255,255,255,0.75);
      max-width: 650px;
      margin: 0 0 40px;
      line-height: 1.7;
      font-weight: 300;
    }
    .tavan-hero-actions {
      display: flex;
      gap: 16px;
      flex-wrap: wrap;
      justify-content: center;
      margin-bottom: 60px;
    }
    .tavan-btn-primary {
      padding: 14px 36px;
      background: linear-gradient(135deg, #d4af37 0%, #f4cf68 100%);
      color: #1a0a2e;
      text-decoration: none;
      border-radius: 8px;
      font-weight: 700;
      font-size: 15px;
      transition: all 0.3s ease;
      box-shadow: 0 8px 24px rgba(212, 175, 55, 0.3);
      letter-spacing: 0.3px;
    }
    .tavan-btn-primary:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 32px rgba(212, 175, 55, 0.5);
    }
    .tavan-btn-ghost {
      padding: 14px 36px;
      background: transparent;
      color: #fff;
      text-decoration: none;
      border: 1px solid rgba(255,255,255,0.25);
      border-radius: 8px;
      font-weight: 500;
      font-size: 15px;
      transition: all 0.3s ease;
      backdrop-filter: blur(10px);
    }
    .tavan-btn-ghost:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.4);
    }
    .tavan-hero-stats {
      display: flex;
      gap: 60px;
      flex-wrap: wrap;
      justify-content: center;
      padding-top: 30px;
      border-top: 1px solid rgba(255,255,255,0.1);
    }
    .tavan-stat {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
    }
    .tavan-stat-number {
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      font-weight: 800;
      background: linear-gradient(135deg, #d4af37 0%, #f4cf68 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      line-height: 1;
    }
    .tavan-stat-label {
      font-size: 13px;
      color: rgba(255,255,255,0.6);
      font-weight: 400;
      letter-spacing: 0.5px;
    }
    @media (max-width: 768px) {
      .tavan-hero-stats {
        gap: 30px;
      }
      .tavan-hero-actions {
        gap: 12px;
      }
      .tavan-btn-primary, .tavan-btn-ghost {
        padding: 12px 24px;
        font-size: 14px;
      }
    }
  </style>

  <script src="runtime-es2015.7d21ac8dd3a7e572d9ab.js" type="module"></script><script src="runtime-es5.7d21ac8dd3a7e572d9ab.js" nomodule="" defer=""></script><script src="polyfills-es5.916794db412df4f9c6a8.js" nomodule="" defer=""></script><script src="polyfills-es2015.b0f176df845149bd020f.js" type="module"></script><script src="scripts.568694a568f45ab03c95.js" defer=""></script><script src="main-es2015.d2845d7029b7797e6556.js" type="module"></script><script src="main-es5.d2845d7029b7797e6556.js" nomodule="" defer=""></script>
  <script>
    (function() {
      function hideHeroWhenAngularReady() {
        var hero = document.getElementById('tavan-hero-overlay');
        if (!hero) return;
        var appRoot = document.querySelector('app-root');
        if (appRoot && appRoot.children.length > 0) {
          setTimeout(function() {
            hero.style.transition = 'opacity 0.6s ease';
            hero.style.opacity = '0';
            setTimeout(function() { hero.style.display = 'none'; }, 600);
          }, 1500);
        } else {
          setTimeout(hideHeroWhenAngularReady, 200);
        }
      }
      if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', hideHeroWhenAngularReady);
      } else {
        hideHeroWhenAngularReady();
      }
    })();
  </script>
</body>

</html>
