.elementor-3503 .elementor-element.elementor-element-fb697ed{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}body.elementor-page-3503:not(.elementor-motion-effects-element-type-background), body.elementor-page-3503 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:transparent;background-image:linear-gradient(180deg, var( --e-global-color-5bc513d2 ) 15%, var( --e-global-color-5bc513d2 ) 80%);}/* Start custom CSS */<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700&display=swap');

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: 'Rubik', sans-serif;
  background-color: #FEFAE0;
  color: #283618;
  line-height: 1.6;
  direction: rtl;
  overflow-x: hidden;
}

/* Header */
header {
  background-color: #283618;
  padding: 10px 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.18);
  position: sticky;
  top: 0;
  z-index: 1000;
  gap: 15px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

/* צ'קבוקס מוסתר לשליטה בהמבורגר */
#menu-toggle {
  display: none;
}

/* כפתור המבורגר - מוסתר בדסקטופ */
.hamburger-btn {
  display: none;
  cursor: pointer;
  padding: 6px;
  background: transparent;
  border: none;
  align-items: center;
  justify-content: center;
}

.hamburger-btn svg {
  width: 28px;
  height: 28px;
  stroke: #FFFFFF;
  stroke-width: 2.2;
  stroke-linecap: round;
}

.nav-links {
  display: flex;
  align-items: center;
  list-style: none;
  gap: 22px;
  margin: 0;
  padding: 0;
  white-space: nowrap;
}

.nav-links li {
  display: inline-flex;
  align-items: center;
}

.nav-links a {
  color: #FFFFFF !important;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: color 0.2s, transform 0.2s;
}

.nav-links a:hover {
  color: #DDA15E !important;
  transform: translateY(-1px);
}

.header-left {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.btn-support {
  background-color: #BC6C25;
  color: #FFFFFF !important;
  border: none;
  padding: 8px 20px;
  border-radius: 20px;
  font-family: 'Rubik', sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.25s ease;
  box-shadow: 0 2px 6px rgba(188, 108, 37, 0.35);
}

.btn-support:hover {
  background-color: #934f14;
  color: #FFFFFF !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(188, 108, 37, 0.45);
}

.btn-login {
  background: transparent;
  border: 1.5px solid #DDA15E;
  color: #FFFFFF !important;
  padding: 7px 16px;
  border-radius: 20px;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  font-size: 13.5px;
  cursor: pointer;
  text-decoration: none;
  display: inline-block;
  transition: all 0.2s;
}

.btn-login:hover {
  background: #DDA15E;
  color: #283618 !important;
}

.header-logo {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
  max-width: 170px !important;
  object-fit: contain !important;
  display: block !important;
  transition: transform 0.25s ease;
}

.header-logo:hover {
  transform: scale(1.05);
}

/* Hero Section */
.hero {
  background: linear-gradient(180deg, #FAF4DC 0%, #FEFAE0 100%);
  border-bottom: 1px solid #E3D9C0;
  text-align: center;
  padding: 70px 20px 65px;
}

.hero h1 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 16px;
  color: #283618;
  line-height: 1.25;
  letter-spacing: -0.5px;
}

.hero p {
  font-size: 17.5px;
  font-weight: 500;
  color: #606C38;
  max-width: 680px;
  margin: 0 auto 35px;
}

.search-box {
  max-width: 580px;
  margin: 0 auto;
  display: flex;
  background: #FFFFFF;
  border: 2px solid #606C38;
  border-radius: 35px;
  padding: 5px 8px;
  box-shadow: 0 6px 20px rgba(40, 54, 24, 0.08);
  transition: border-color 0.25s, box-shadow 0.25s;
}

.search-box:focus-within {
  border-color: #BC6C25;
  box-shadow: 0 6px 22px rgba(188, 108, 37, 0.2);
}

.search-box input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 18px;
  font-family: 'Rubik', sans-serif;
  font-size: 15px;
  border-radius: 35px;
  color: #283618;
}

.search-box button {
  background: #BC6C25;
  color: #FFFFFF !important;
  border: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.search-box button:hover {
  background: #934f14;
  transform: scale(1.05);
}

.search-box svg {
  width: 19px;
  height: 19px;
  stroke: #FFFFFF;
  fill: none;
  stroke-width: 2.2;
}

/* כותרות סקשן */
.section-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #283618;
  margin-bottom: 8px;
}

.section-subtitle {
  text-align: center;
  font-size: 15px;
  color: #606C38;
  margin-bottom: 35px;
}

/* מגירות הארכיון - FLIP CARDS */
.drawers-section {
  padding: 65px 25px;
  max-width: 1100px;
  margin: auto;
}

.drawers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px;
}

.flip-card {
  background-color: transparent;
  height: 215px;
  perspective: 1000px;
  cursor: pointer;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.7s cubic-bezier(0.4, 0.2, 0.2, 1);
  transform-style: preserve-3d;
  border-radius: 8px;
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  border-radius: 8px;
  overflow: hidden;
}

.flip-card-front {
  background: linear-gradient(135deg, #EFE6D1 0%, #E3D4B6 100%);
  border: 3px solid #8D6E63;
  padding: 22px 18px;
  box-shadow: inset 0 1px 3px rgba(255,255,255,0.7), 0 5px 15px rgba(62, 39, 35, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.drawer-label-holder {
  background: #FEFAE0;
  border: 2px solid #BC6C25;
  padding: 12px 16px;
  border-radius: 4px;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.08);
  width: 90%;
  margin-bottom: 12px;
}

.drawer-label-holder h3 {
  font-size: 18px;
  font-weight: 700;
  color: #283618;
  margin-bottom: 4px;
}

.drawer-label-holder p {
  font-size: 12.5px;
  color: #606C38;
  font-weight: 500;
}

.drawer-handle {
  width: 60px;
  height: 14px;
  background: linear-gradient(180deg, #DDA15E 0%, #BC6C25 100%);
  border: 1px solid #794411;
  border-radius: 0 0 12px 12px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.25);
}

.flip-hint {
  position: absolute;
  bottom: 6px;
  font-size: 11px;
  color: #8D6E63;
  font-weight: 500;
}

.flip-card-back {
  background: #283618;
  color: #FFFFFF;
  transform: rotateY(180deg);
  border: 3px solid #BC6C25;
  padding: 20px 18px;
  box-shadow: 0 8px 20px rgba(40, 54, 24, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.flip-card-back h4 {
  font-size: 17px;
  color: #DDA15E;
  margin-bottom: 6px;
  font-weight: 700;
}

.flip-card-back p {
  font-size: 13px;
  color: #FEFAE0;
  line-height: 1.45;
  margin-bottom: 8px;
}

.drawer-open-btn {
  background-color: #BC6C25;
  color: #FFFFFF !important;
  text-decoration: none;
  padding: 6px 18px;
  border-radius: 18px;
  font-size: 13px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.2s, transform 0.2s;
}

.drawer-open-btn:hover {
  background-color: #DDA15E;
  color: #283618 !important;
  transform: scale(1.04);
}

/* ציר זמן */
.timeline-section {
  background: #F4EEDC;
  padding: 50px 20px;
  text-align: center;
  border-top: 1px solid #DDA15E;
  border-bottom: 1px solid #DDA15E;
}

.timeline-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 25px;
}

.timeline-node {
  background: #FFFFFF;
  border: 2px solid #283618;
  color: #283618;
  font-weight: 600;
  font-size: 14px;
  padding: 9px 18px;
  border-radius: 25px;
  cursor: pointer;
  transition: all 0.25s ease;
}

.timeline-node:hover, .timeline-node.active {
  background: #283618;
  color: #FFFFFF !important;
  border-color: #283618;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(40, 54, 24, 0.2);
}

/* סינון לפי מדיה */
.media-filter-section {
  text-align: center;
  padding: 60px 20px;
  background-color: #FEFAE0;
}

.media-buttons-container {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 25px;
}

.media-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 24px;
  background-color: #283618;
  color: #FFFFFF !important;
  border: 1.5px solid #283618;
  border-radius: 30px;
  font-size: 14.5px;
  font-family: 'Rubik', sans-serif;
  font-weight: 500;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.25s ease;
}

.media-btn svg {
  width: 18px;
  height: 18px;
  stroke: #DDA15E;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transition: stroke 0.25s ease;
}

.media-btn:hover {
  background-color: #3f5524;
  border-color: #BC6C25;
  color: #FFFFFF !important;
  box-shadow: 0 4px 14px rgba(40, 54, 24, 0.25);
  transform: translateY(-2px);
}

.media-btn:hover svg {
  stroke: #FFFFFF;
}

/* מסלולי מנויים ותמיכה */
.pricing-section {
  padding: 65px 25px;
  max-width: 1050px;
  margin: auto;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 35px;
}

.pricing-card {
  background: #FFFFFF;
  border: 1.5px solid #DDA15E;
  border-radius: 10px;
  padding: 35px 22px 28px;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pricing-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(40, 54, 24, 0.1);
}

.pricing-card.featured {
  border: 2.5px solid #283618;
  position: relative;
}

.badge {
  position: absolute;
  top: -12px;
  right: 50%;
  transform: translateX(50%);
  background: #BC6C25;
  color: #FFFFFF;
  font-size: 12px;
  padding: 4px 16px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.pricing-card h3 {
  font-size: 20px;
  color: #283618;
  margin-bottom: 10px;
}

.pricing-card .desc {
  font-size: 13.5px;
  color: #606C38;
  margin-bottom: 22px;
  line-height: 1.5;
}

.btn-plan {
  display: block;
  background: #283618;
  color: #FFFFFF !important;
  text-decoration: none;
  padding: 10px 0;
  border-radius: 25px;
  font-weight: 600;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-plan:hover {
  background: #3f5524;
  color: #FFFFFF !important;
  transform: translateY(-1px);
}

.pricing-card.featured .btn-plan {
  background: #BC6C25;
  color: #FFFFFF !important;
}

.pricing-card.featured .btn-plan:hover {
  background: #934f14;
  color: #FFFFFF !important;
}

/* Footer */
footer {
  background-color: #283618;
  color: #FFFFFF;
  padding: 45px 25px 22px;
  border-top: 4px solid #BC6C25;
  font-size: 14px;
}

.footer-content {
  max-width: 1050px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 30px;
  margin-bottom: 30px;
}

.footer-logo {
  height: 52px !important;
  max-height: 52px !important;
  width: auto !important;
  max-width: 180px !important;
  object-fit: contain !important;
  border-radius: 6px;
  margin-bottom: 14px;
  display: block;
}

.footer-col h4 {
  color: #DDA15E;
  font-size: 16px;
  margin-bottom: 12px;
  font-weight: 600;
}

.footer-col ul {
  list-style: none;
}

.footer-col ul li {
  margin-bottom: 8px;
}

.footer-col ul a {
  color: #FFFFFF !important;
  text-decoration: none;
  transition: color 0.2s;
}

.footer-col ul a:hover {
  color: #DDA15E !important;
}

.footer-bottom {
  text-align: center;
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: 20px;
  color: #DDA15E;
  font-size: 13px;
}

/* =======================================================
   התאמות רספונסיביות ומובייל (מתחת ל-768px)
   ======================================================= */
@media (max-width: 768px) {
  header {
    padding: 10px 18px;
  }

  .header-logo {
    height: 40px !important;
    max-height: 40px !important;
    max-width: 130px !important;
  }

  /* כפתור המבורגר מוצג */
  .hamburger-btn {
    display: flex;
  }

  /* תפריט מובייל נשלף כלפי מטה */
  .nav-links {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    background-color: #202b13;
    flex-direction: column;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease, padding 0.35s ease;
    box-shadow: 0 10px 15px rgba(0,0,0,0.25);
    border-bottom: 2px solid #BC6C25;
    gap: 0;
  }

  .nav-links li {
    width: 100%;
    border-bottom: 1px solid rgba(254, 250, 224, 0.1);
  }

  .nav-links a {
    width: 100%;
    padding: 13px 24px;
    font-size: 15px;
    display: block;
  }

  /* פתיחת התפריט כאשר הצ'קבוקס מסומן */
  #menu-toggle:checked ~ .header-right .nav-links {
    max-height: 300px;
    padding: 8px 0;
  }

  /* שינוי קל באייקון ההמבורגר בעת פתיחה */
  #menu-toggle:checked ~ .header-right .hamburger-btn svg {
    stroke: #DDA15E;
  }

  /* התאמת כפתורי הפעולה בראש הדף למובייל */
  .btn-login {
    display: none; /* מוסתר במסכים צרים כדי לחסוך מקום, נשאר בתוך האתר */
  }

  .btn-support {
    padding: 7px 14px;
    font-size: 12.5px;
  }

  /* Hero Section */
  .hero {
    padding: 45px 16px 40px;
  }

  .hero h1 {
    font-size: 27px;
    line-height: 1.3;
  }

  .hero p {
    font-size: 15px;
    margin-bottom: 25px;
  }

  .search-box {
    width: 100%;
  }

  .search-box input {
    padding: 8px 14px;
    font-size: 13.5px;
  }

  .search-box button {
    width: 38px;
    height: 38px;
  }

  /* מגירות הארכיון */
  .drawers-section {
    padding: 45px 18px;
  }

  .drawers-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .flip-card {
    height: 195px;
  }

  /* ציר זמן */
  .timeline-section {
    padding: 40px 15px;
  }

  .timeline-bar {
    gap: 10px;
  }

  .timeline-node {
    font-size: 12.5px;
    padding: 7px 14px;
  }

  /* סינון לפי מדיה */
  .media-filter-section {
    padding: 45px 15px;
  }

  .media-buttons-container {
    gap: 10px;
  }

  .media-btn {
    padding: 9px 18px;
    font-size: 13px;
    flex: 1 1 calc(50% - 10px);
    justify-content: center;
  }

  /* מסלולי מנויים */
  .pricing-section {
    padding: 45px 18px;
  }

  .pricing-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /* Footer */
  footer {
    padding: 35px 20px 20px;
  }

  .footer-content {
    flex-direction: column;
    gap: 24px;
  }
}
</style>

<!-- Header עם המבורגר למובייל -->
<header>
  <!-- צ'קבוקס מוסתר לשליטה בתפריט מובייל ללא JS -->
  <input type="checkbox" id="menu-toggle">

  <div class="header-right">
    <!-- כפתור המבורגר (נראה רק במובייל) -->
    <label for="menu-toggle" class="hamburger-btn" aria-label="תפריט">
      <svg viewBox="0 0 24 24" fill="none">
        <line x1="3" y1="6" x2="21" y2="6"></line>
        <line x1="3" y1="12" x2="21" y2="12"></line>
        <line x1="3" y1="18" x2="21" y2="18"></line>
      </svg>
    </label>

    <ul class="nav-links">
      <li><a href="#">אודות</a></li>
      <li><a href="#">מגירות הארכיון</a></li>
      <li><a href="#">ציר זמן</a></li>
      <li><a href="#">תקנון</a></li>
      <li><a href="#">יצירת קשר</a></li>
    </ul>
  </div>

  <!-- צד שמאל: כפתורי פעולה ולוגו עליון -->
  <div class="header-left">
    <a href="#" class="btn-support">תמכו בנו</a>
    <a href="#" class="btn-login">כניסת מנויים</a>
    <a href="#" title="הארכיון של אהוד ממטולה">
      <img class="header-logo" src="https://pluscontent.digital/wp-content/uploads/2026/09/אהוד-לוגו-בלבן-ללא-רקע-1-e1789758508103.png" alt="לוגו הארכיון של אהוד ממטולה">
    </a>
  </div>
</header>

<!-- Hero Section -->
<section class="hero">
  <h1>מפעל החיים והתיעוד של אהוד ממטולה</h1>
  <p>מסע בזמן בין תולדות המושבה מ-1896, סרטי הווידאו, הקלטות השמע, העיתונות ועבודת האדמה</p>
  
  <div class="search-box">
    <input type="text" placeholder="חפשו אישיות, שנה, מקום או אירוע בארכיון...">
    <button type="button" aria-label="חיפוש">
      <svg viewBox="0 0 24 24">
        <circle cx="11" cy="11" r="8"></circle>
        <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
      </svg>
    </button>
  </div>
</section>

<!-- מגירות הארכיון - FLIP CARDS (ב-CSS בלבד) -->
<section class="drawers-section">
  <div class="section-title">מגירות הארכיון</div>
  <div class="section-subtitle">העבירו את העכבר על מגירה כדי להציץ לתוכן המורחב</div>
  
  <div class="drawers-grid">
    
    <!-- כרטיס 1: מטולה -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <div class="drawer-label-holder">
            <h3>תולדות מטולה</h3>
            <p>מראשית המושבה ב-1896 ועד ימינו</p>
          </div>
          <div class="drawer-handle"></div>
          <span class="flip-hint">הצצה לתוכן המגירה ↻</span>
        </div>
        <div class="flip-card-back">
          <div>
            <h4>מורשת המושבה</h4>
            <p>עשרות שעות תיעוד, צילומי אוויר, עדויות הוותיקים, אתרי המורשת ומסמכים מראשית ההתיישבות על הגבול.</p>
          </div>
          <a href="#" class="drawer-open-btn">פתיחת המגירה ←</a>
        </div>
      </div>
    </div>

    <!-- כרטיס 2: משק אהוד -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <div class="drawer-label-holder">
            <h3>משק אהוד ניישטיין</h3>
            <p>מטעי הפירות, פקאנים, קיווי וחקלאות הגליל</p>
          </div>
          <div class="drawer-handle"></div>
          <span class="flip-hint">הצצה לתוכן המגירה ↻</span>
        </div>
        <div class="flip-card-back">
          <div>
            <h4>חקלאות ועבודת אדמה</h4>
            <p>תיעוד עונות הקטיף, נטיעות הזנים החדשים, הדרכת קרקע ומים והעבודה המשותפת עם בני המשפחה והעובדים.</p>
          </div>
          <a href="#" class="drawer-open-btn">פתיחת המגירה ←</a>
        </div>
      </div>
    </div>

    <!-- כרטיס 3: שבט וינקלר וניישטיין -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <div class="drawer-label-holder">
            <h3>שבט וינקלר וניישטיין</h3>
            <p>ענפי המשפחה, דורות המייסדים והשורשים</p>
          </div>
          <div class="drawer-handle"></div>
          <span class="flip-hint">הצצה לתוכן המגירה ↻</span>
        </div>
        <div class="flip-card-back">
          <div>
            <h4>אילן יוחסין ושורשים</h4>
            <p>מסיפורי צ'רנה ומנשה וינקלר שעלו ב-1896 ועד משפחת ניישטיין המורחבת. תמונות משפחתיות נדירות וכתבי יד.</p>
          </div>
          <a href="#" class="drawer-open-btn">פתיחת המגירה ←</a>
        </div>
      </div>
    </div>

    <!-- כרטיס 4: צבא ומקווה ישראל -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <div class="drawer-label-holder">
            <h3>צבא ומקווה ישראל</h3>
            <p>שירותו של אהוד בתותחנים ומחזור בית הספר</p>
          </div>
          <div class="drawer-handle"></div>
          <span class="flip-hint">הצצה לתוכן המגירה ↻</span>
        </div>
        <div class="flip-card-back">
          <div>
            <h4>חברים לשירות וללימודים</h4>
            <p>זיכרונות ממחזור הלימודים בבית הספר החקלאי מקווה ישראל, לצד תמונות ויומנים משירות הקבע והמילואים בתותחנים.</p>
          </div>
          <a href="#" class="drawer-open-btn">פתיחת המגירה ←</a>
        </div>
      </div>
    </div>

    <!-- כרטיס 5: אירועים פרטיים -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <div class="drawer-label-holder">
            <h3>אירועים פרטיים</h3>
            <p>תיעוד משפחתי, חגיגות, ראיונות וקבלות שבת</p>
          </div>
          <div class="drawer-handle"></div>
          <span class="flip-hint">הצצה לתוכן המגירה ↻</span>
        </div>
        <div class="flip-card-back">
          <div>
            <h4>רגעים אישיים שנדגמו</h4>
            <p>שמחות משפחתיות, שירים ופיוטים, קבלות שבת מסורתיות בבית במטולה וסרטונים אינטימיים שאבא תיעד במצלמתו.</p>
          </div>
          <a href="#" class="drawer-open-btn">פתיחת המגירה ←</a>
        </div>
      </div>
    </div>

    <!-- כרטיס 6: ספרים ועיתונות -->
    <div class="flip-card">
      <div class="flip-card-inner">
        <div class="flip-card-front">
          <div class="drawer-label-holder">
            <h3>ספרים ועיתונות</h3>
            <p>כתבות מארכיון המושבה, מכתבים ועדויות כתובות</p>
          </div>
          <div class="drawer-handle"></div>
          <span class="flip-hint">הצצה לתוכן המגירה ↻</span>
        </div>
        <div class="flip-card-back">
          <div>
            <h4>טקסטים ומסמכים סרוקים</h4>
            <p>גזרי עיתונות היסטוריים, מאמרים על ההתיישבות בגליל העליון, כתבי הגנה וספרים שראו אור אודות מטולה ואהוד.</p>
          </div>
          <a href="#" class="drawer-open-btn">פתיחת המגירה ←</a>
        </div>
      </div>
    </div>

  </div>
</section>

<!-- ציר זמן פשוט ואמין -->
<section class="timeline-section">
  <div class="section-title">ציר הזמן ההיסטורי</div>
  <div class="section-subtitle">בחרו תקופה לצפייה בכל החומרים שתועדו באותן שנים</div>
  <div class="timeline-bar">
    <div class="timeline-node active">1896 (הקמת מטולה)</div>
    <div class="timeline-node">1897–1910</div>
    <div class="timeline-node">1910–1930</div>
    <div class="timeline-node">1930–1940</div>
    <div class="timeline-node">1940–1950</div>
    <div class="timeline-node">1968 ואילך (סרטי אהוד)</div>
  </div>
</section>

<!-- סינון לפי מדיה -->
<section class="media-filter-section">
  <div class="section-title">סינון לפי סוג מדיה</div>
  <div class="section-subtitle">לחיצה פותחת את כל החומרים בפורמט המבוקש</div>
  
  <div class="media-buttons-container">
    <button class="media-btn">
      <svg viewBox="0 0 24 24">
        <rect x="2" y="3" width="20" height="14" rx="2" ry="2"/>
        <line x1="8" y1="21" x2="16" y2="21"/>
        <line x1="12" y1="17" x2="12" y2="21"/>
        <polygon points="10 8 15 10 10 12 10 8" fill="#DDA15E" stroke="none"/>
      </svg>
      <span>וידאו וסרטי סופר 8</span>
    </button>

    <button class="media-btn">
      <svg viewBox="0 0 24 24">
        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
        <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
        <line x1="12" y1="19" x2="12" y2="23"/>
        <line x1="8" y1="23" x2="16" y2="23"/>
      </svg>
      <span>אודיו והקלטות</span>
    </button>

    <button class="media-btn">
      <svg viewBox="0 0 24 24">
        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
        <circle cx="8.5" cy="8.5" r="1.5"/>
        <polyline points="21 15 16 10 5 21"/>
      </svg>
      <span>שקופיות ותמונות</span>
    </button>

    <button class="media-btn">
      <svg viewBox="0 0 24 24">
        <path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"/>
        <line x1="10" y1="7" x2="18" y2="7"/>
        <line x1="10" y1="11" x2="18" y2="11"/>
        <line x1="10" y1="15" x2="14" y2="15"/>
      </svg>
      <span>עיתונות וסיפורים</span>
    </button>
  </div>
</section>

<!-- מסלולי מנויים ותמיכה בארכיון -->
<section class="pricing-section">
  <div class="section-title">מסלולי מנויים ותמיכה בארכיון</div>
  <div class="section-subtitle">התכנים מונגשים לקהל הרחב לצפייה ועיון בכפוף להרשמה</div>

  <div class="pricing-grid">
    <div class="pricing-card">
      <div>
        <h3>מנוי רשום</h3>
        <p class="desc">גישה בסיסית לסיפורים, עיתונות וגלריות נבחרות</p>
      </div>
      <button class="btn-plan">הרשמה ללא עלות</button>
    </div>

    <div class="pricing-card featured">
      <span class="badge">מומלץ לחוקרים ומתעניינים</span>
      <div>
        <h3>מנוי חודשי / שנתי</h3>
        <p class="desc">גישה מלאה לכל סרטי הווידאו, הקלטות האודיו ומסמכי הארכיון</p>
      </div>
      <button class="btn-plan">הצטרפות למנוי המלא</button>
    </div>

    <div class="pricing-card">
      <div>
        <h3>מנוי תומך</h3>
        <p class="desc">סיוע במפעל הדיגיטציה, השימור והמשך הנצחת הארכיון</p>
      </div>
      <button class="btn-plan">תמיכה בארכיון</button>
    </div>
  </div>
</section>

<!-- Footer -->
<footer>
  <div class="footer-content">
    <div class="footer-col">
      <img class="footer-logo" src="https://pluscontent.digital/wp-content/uploads/2026/09/אהוד-לוגו-בלבן-ללא-רקע-1-e1789758508103.png" alt="לוגו הארכיון של אהוד ממטולה">
      <h4>הארכיון של אהוד ממטולה</h4>
      <p style="max-width: 320px; color: #FFFFFF;">בית אינטרנטי למפעל חייו ולתיעוד המרתק שהותיר אחריו אהוד ניישטיין ז"ל, מנופי מטולה וראשית ימיה.</p>
    </div>
    <div class="footer-col">
      <h4>ניווט מהיר</h4>
      <ul>
        <li><a href="#">אודות אהוד</a></li>
        <li><a href="#">רכישת פריט או חטיבה</a></li>
        <li><a href="#">מנויים והרשאות</a></li>
        <li><a href="#">תקנון האתר וזכויות יוצרים</a></li>
      </ul>
    </div>
    <div class="footer-col">
      <h4>יצירת קשר</h4>
      <ul>
        <li>מייל: info@ehud-archive.co.il</li>
        <li>מטולה, ישראל</li>
      </ul>
    </div>
  </div>
  <div class="footer-bottom">
    כל הזכויות שמורות © הארכיון של אהוד ממטולה | אין להעתיק או להפיץ חומרים ללא מתן קרדיט והסכמה בכתב
  </div>
</footer>/* End custom CSS */