/* Custom header */
.custom-header {
  display: flex; /* Flex container for alignment */
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  max-width: 100%; /* Ensures it doesn't exceed container width */
  justify-content: space-between; /* Spread items horizontally */
  align-items: flex-start; /* Align items to the left */
  padding: 30px 0px 30px 0px;
  margin: 0px 0px 0px 0px;
  background-color: black !important; /* Example background color */
}

/* Header content */
.header-content {
  display: flex; /* Flex container for alignment */
  flex-wrap: wrap; /* Allows wrapping on smaller screens */
  align-items: flex-start; /* Align items to the left */
  gap: 10px; /* Space between elements */
  flex: 1; /* Makes it flexible within the container */
  max-width: 100%; /* Prevents overflow */
}

/* Header logo */
.header-content .header-logo {
  flex-shrink: 0; /* Prevents the logo from shrinking */
}

/* Media query for smaller screens */
@media only screen and (max-width: 769px) {
  .custom-header {
    flex-direction: column; /* Stacks items vertically */
    align-items: flex-start; /* Align items to the left */
    padding: 10px 0 0 0; /* Adds padding at the top when stacked */
    margin: 0; /* Adjusted for mobile */
  }

  .header-content {
    flex-direction: column; /* Stacks header content vertically */
    gap: 10px; /* Adjust spacing between elements */
    align-items: flex-start; /* Align items to the left */
  }
}