/* 
   Header fix styles for keeping header fixed during scroll
*/

/* Ensure the header stays fixed on all screen sizes */
@media (max-width: 768px) {
  html, body {
    padding-top: 70px;
  }
  
  header {
    height: auto;
  }
  
  .header-container {
    padding: 0.7rem 0;
  }
}

/* Add animation for smooth header appearance/disappearance */
@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

/* Add animation class when scrolling */
header.scrolling {
  animation: slideDown 0.3s ease-in-out;
}