/* Heebo */
@font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'Heebo';
    src: url('../fonts/heebo/Heebo-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
  }
  
  /* IBM Plex Sans Hebrew */
  @font-face {
    font-family: 'IBM Plex Sans Hebrew';
    src: url('../fonts/ibm-plex-sans-hebrew/IBMPlexSansHebrew-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans Hebrew';
    src: url('../fonts/ibm-plex-sans-hebrew/IBMPlexSansHebrew-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans Hebrew';
    src: url('../fonts/ibm-plex-sans-hebrew/IBMPlexSansHebrew-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans Hebrew';
    src: url('../fonts/ibm-plex-sans-hebrew/IBMPlexSansHebrew-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans Hebrew';
    src: url('../fonts/ibm-plex-sans-hebrew/IBMPlexSansHebrew-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans Hebrew';
    src: url('../fonts/ibm-plex-sans-hebrew/IBMPlexSansHebrew-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'IBM Plex Sans Hebrew';
    src: url('../fonts/ibm-plex-sans-hebrew/IBMPlexSansHebrew-Bold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
  }
  
  /* Font variables are in variables.css: --font-heebo, --font-ibm-plex-hebrew */
  body {
    font-family: var(--font-heebo);
  }
  
  /* ==========================================================================
     Reusable text styles – IBM Plex Sans Hebrew
     Use these classes on any element: <p class="text">, <h2 class="heading">, etc.
     ========================================================================== */
  
  /* Body text – 16px, regular, right, line-height 130% */
  .text {
    font-family: var(--font-ibm);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0;
  }

  .text-heebo {
    font-family: var(--font-heebo);
    font-weight: 400;
    font-style: normal;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0;
  }
  
  /* Bold body text – 16px, bold, right, line-height 130% */
  .text--bold {
    font-family: var(--font-ibm);
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0;
  }

  .text--bold-heebo {
    font-family: var(--font-heebo);
    font-weight: 700;
    font-style: normal;
    font-size: 16px;
    line-height: 130%;
    letter-spacing: 0;
  }
  
  /* Heading – 40px, bold, right, line-height 100% */
  .heading {
    font-family: var(--font-ibm);
    font-weight: 700;
    font-style: normal;
    font-size: 40px;
    line-height: 100%;
    letter-spacing: 0;
  }

  .heading-small {
    font-family: var(--font-ibm);
    font-weight: 700;
    font-style: normal;
    font-size: 24px;
    line-height: 100%;
    letter-spacing: 0;
  }
  
  /* Small text – 14px, medium, center, line-height 120% */
  .text-small {
    font-family: var(--font-ibm);
    font-weight: 500;
    font-style: normal;
    font-size: 14px;
    line-height: 120%;
    letter-spacing: 0;
  }
  
  /* Big text – 20px, bold, right, line-height 100% */
  .text-big {
    font-family: var(--font-ibm);
    font-weight: 700;
    font-style: normal;
    font-size: 20px;
    line-height: 100%;
    letter-spacing: 0;
  }

  /* Responsive: heading font-size only on mobile (other text styles unchanged) */
  @media (max-width: 768px) {
    .heading {
      font-size: 28px;
    }
  }