/* ============================= */
/*         RESPONSIVE           */
/* ============================= */

@media (max-width: 768px) {
    .container {
      padding: 0 1rem;
    }
  
    .sb-welcome-title {
      font-size: 1.5rem;
      text-align: center;
    }
  
    .sb-header {
      flex-direction: column;
      gap: 1rem;
    }
  
    .story-thumb {
      width: 80px;
      height: 140px;
    }
  
    .section-title {
      font-size: 1.25rem;
      text-align: center;
    }
  
    .story-viewer {
      max-width: 95%;
      max-height: 95%;
    }
  
    .mobile-nav select {
      font-size: 0.95rem;
    }
  
    .card-title {
      font-size: 0.85rem;
    }
  
    .tab-bar {
      max-width: 60%;
      border-radius: 50px;
    }
  }
  
  @media (max-width: 480px) {
    .story-thumb {
      width: 120px;
      height: 230px;
    }
  
    .sb-welcome-title {
      font-size: 1.25rem;
    }
  
    .section-title {
      font-size: 2.1rem;
    }
  
    .card-title {
      font-size: 0.8rem;
    }
  }
  .hidden-header {
    transform: translateY(-100%);
    transition: transform 0.3s ease-in-out;
  }