/* =====================================================
   TALEEM — Single Public Stylesheet

  /* -------------------------------
     Global Page Reset
     ------------------------------- */
  
     html,body {
      height: 100%;
       overflow: hidden;
      margin: 0;
      font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
      background: var(--backgroundColor, #0b1220);
      color: var(--primaryColor, #e6e9ff);
    }
    
    #app {
      position: relative;
      width: 100vw;
      min-height: 100vh;
      overflow: hidden;
    }
    
    /* -------------------------------
       Browser / Player Layers
       ------------------------------- */
    .taleem-browser-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      background-size: cover;
      background-position: center;
    }
    
    .taleem-browser-slide {
      position: relative;
      z-index: 1;
    }
    
    /* -------------------------------
       Base Slide Grammar
       ------------------------------- */
    .slide {
      height: 100vh;
      box-sizing: border-box;
    
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    
      padding: 64px 80px;
      gap: 32px;
    
      overflow: hidden;
      background: transparent;
      color: var(--primaryColor, #e6e9ff);
    
      font-size: 2.4rem;
      line-height: 1.6;
      letter-spacing: 0.01em;
      text-align: center;
    }
    
    /* -------------------------------
       Global Image Safety
       ------------------------------- */
    .slide img {
      max-width: 100%;
      max-height: 100%;
      height: auto;
      width: auto;
      display: block;
    }
    
    /* -------------------------------
       Headings
       ------------------------------- */
    .slide h1 {
      margin: 0;
      letter-spacing: -0.015em;
    }
    
    /* -------------------------------
       Slide Types
       ------------------------------- */
    .slide.titleSlide h1 {
      font-size: 5.6rem;
      font-weight: 700;
      line-height: 1.2;
    }
    
    .slide.titleAndSubtitle h1 {
      font-size: 5.8rem;
      font-weight: 700;
    }
    
    .slide.titleAndSubtitle h2 {
      font-size: 3.8rem;
      font-weight: 400;
      opacity: 0.8;
      margin: 0;
    }
    
    .slide.titleAndPara h1 {
      font-size: 4.8rem;
      font-weight: 600;
    }
    
    .slide.titleAndPara p {
      font-size: 3rem;
      max-width: 70ch;
      opacity: 0.9;
      margin: 0;
    }
    
    /* -------------------------------
       Bullet List
       ------------------------------- */
    .slide.bulletList ul {
      list-style: disc;
      padding-left: 2rem;
      margin: 0;
    }
    
    .slide.bulletList li {
      font-size: 3.6rem;
      margin-bottom: 1rem;
      text-align: left;
      font-weight: 500;
    }
    
    /* -------------------------------
       Image Variants
       ------------------------------- */
    .slide.imageSlide {
      padding: 0;
    }
    
    .slide.imageSlide img {
      object-fit: contain;
    }
    
    .slide.imageWithTitle {
      position: relative;
      padding: 48px;
    }
    
    .slide.imageWithTitle img {
      height: calc(100vh - 96px);
      border-radius: 12px;
    }
    
    .slide.imageWithTitle h1 {
      position: absolute;
      bottom: 64px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 4.6rem;
      background: rgba(0, 0, 0, 0.45);
      padding: 0.4em 0.8em;
      border-radius: 6px;
    }
    
    .slide.imageWithCaption {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 32px;
      height: 100vh;
      overflow: hidden;
    }
    
    .slide.imageWithCaption img {
      max-height: 55vh;        /* reduce slightly */
      object-fit: contain;
      flex-shrink: 0;
    }
    
    .slide.imageWithCaption p {
      max-height: 20vh;        /* hard cap text */
      overflow: hidden;
      text-overflow: ellipsis;
    }
    
    /* -------------------------------
   Two Column Text
   ------------------------------- */


   .slide.twoColumnText {
    flex-direction: row;
    justify-content: center;   /* center the columns block */
    align-items: center;
    gap: 64px;
  }
  
  .slide.twoColumnText > div {
    flex: 1;
    max-width: 520px;          /* keeps columns visually centered */
  }
  

    /* QUOTE SLIDE */
    .slide.quoteSlide {
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 32px;
      height: 100vh;
      overflow: hidden;
    }
    
    .slide.quoteSlide blockquote {
      max-height: 60vh;
      overflow: hidden;
    }
    
    .slide.quoteSlide cite {
      flex-shrink: 0;
    }
    
    /* -------------------------------
       Quote Slide
       ------------------------------- */
    .slide.quoteSlide blockquote {
      font-size: 3.8rem;
      font-style: italic;
      max-width: 60ch;
    }
    
    .slide.quoteSlide cite {
      font-size: 2.4rem;
      opacity: 0.75;
    }
    
    /* -------------------------------
       Big Number
       ------------------------------- */
    .slide.bigNumber .number {
      font-size: 9rem;
      font-weight: 700;
    }
    
    /* -------------------------------
       Fill Image (Full Bleed)
       ------------------------------- */
    .slide.fillImage {
      padding: 0;
      height: 100vh;
      display: block;
    }
    
    .slide.fillImage img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    /* -------------------------------
       Demo / Player UI (Optional)
       ------------------------------- */
    #timebar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      height: 32px;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(6px);
      z-index: 10;
    }
    


    /* ///////fixes  */

    /* -------------------------------
   Image + Bullets (Side by Side)
   ------------------------------- */

.slide.imageRightBulletsLeft,
.slide.imageLeftBulletsRight {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 64px;
  text-align: left;
}

/* image on right */
.slide.imageRightBulletsLeft img {
  order: 2;
}
/* -------------------------------
   Table Slide
   ------------------------------- */

   .slide.table {
    display: flex;
    justify-content: center;
    align-items: center;
  
    width: 100%;
    height: 100vh;
  
    padding: 64px 80px;
    box-sizing: border-box;
  }
  
  /* actual table */
  .slide.table table {
    border-collapse: collapse;
    width: 100%;
    max-width: 1200px;
  
    font-size: 2.8rem;
    line-height: 1.4;
    text-align: center;
  
    color: var(--primaryColor, #e6e9ff);
  }
  
  /* header cells (title row) */
  .slide.table thead th {
    font-weight: 700; /* title row bold */
    padding: 20px 24px;
  
    border: 2px solid rgba(255, 255, 255, 0.35);
  }
  
  /* body cells */
  .slide.table tbody td {
    padding: 20px 24px;
  
    border: 2px solid rgba(255, 255, 255, 0.25);
  }
/* hide empty table header row */
.slide.table thead th:empty {
  display: none;
}

.slide.table thead tr:has(th:empty) {
  display: none;
}