/* =========================
   HEADER LAYOUT ONLY
========================= */
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.header-left,
.header-center,
.header-right {
  display: flex;
  align-items: center;
}

.header-right {
  gap: 10px;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 768px) {

  .header-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .header-center {
    width: 100%;
  }

  .header-right {
    width: 100%;
    justify-content: space-between;
  }

}