.header {
  top: 0;
  width: 100%;
  background-color: var(--primary-color);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Add a subtle shadow */
  /* padding: 8px 16px 8px 16px;  */
  transition: all 0.5s;
  height: 56px;
  z-index: 9999999999999;
  position: fixed;
}

/* Example styles for Fleet and View */
.fleet-text {
  color: #eceff1;
  font-size: 18px;
}

.view-text {
  color: var(--secondary-color);
}

.company-heading {
  margin-left: 1vw;
  font-family: "Montserrat", sans-serif;
  color: #333333;
  width: 8vw;
  white-space: nowrap;
  font-weight: 600;
}

.header .row .col-auto span {
  user-select: none;
  display: flex;
  align-items: center;
  margin-right: 1rem;
  /* font-weight: 600; */
  font-size: 1rem;
}

.header .row .col-auto {
  padding-left: 0.25rem;
  /* Adjust padding to reduce the gap */
  padding-right: 0.25rem;
  /* Adjust padding to reduce the gap */
}

.header .row .col-auto span strong {
  color: #333333;
  margin-right: 5px;
  /* Add some space between the heading and the value */
}

.header .row .col-auto span span {
  color: inherit;
  /* Use the default color for values */
}

@media (max-width: 768px) {
  .header .row .col-auto {
    padding: 0 5px;
    /* Adjust padding for smaller screens */
  }

  .header .row.align-items-center.justify-content-between.mt-2 {
    flex-wrap: wrap;
  }

  .header .row.align-items-center.justify-content-between.mt-2 .col-auto {
    flex: 1 0 50%;
    /* Two columns per row on smaller screens */
    text-align: center;
    padding-bottom: 5px;
  }
}

.company-name {
  font-size: 1rem;
  color: var(--secondary-color);
  margin-left: 4px;
}

.company-name span {
  color: var(--warning-color);
}