.navbar-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative; 
}

#quarto-search {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  z-index: 1000;
}



.aa-Panel, 
.algolia-autocomplete .ds-dropdown-menu {
  left: 50% !important;
  transform: translateX(-50%) !important;
  right: auto !important;
}

@media (max-width: 768px) {
  #quarto-search {
    position: static;
    transform: none;
    left: auto;
    width: 100%;
    margin-top: 10px;
  }
  
  .aa-Panel, 
  .algolia-autocomplete .ds-dropdown-menu {
    left: 0 !important;
    transform: none !important;
  }
}