/* Class added when header becomes sticky */
#top-header {
    transition: transform 0.3s ease;
  }
  
  #main-header {
    transition: top 0.3s ease;
    position: fixed;
    width: 100%;
    z-index: 40;
    background-color: white;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.1);
  }
  
  /* Initially, push down below top header */
  #main-header.default {
    top: 56px; /* Same as top-header height */
  }
  
  /* When top-header is hidden, move main-header up */
  #main-header.sticky {
    top: 0;
  }
  
  @keyframes fade-in {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
  }
  
  .animate-fade-in {
    animation: fade-in 0.3s ease-out;
  }