/* --- Pre-Header Top Bar --- */
.pre-header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 40px;
  background: #ffffff;
  color: #655e5e;
  z-index: 1001; /* above navbar */
  line-height: 40px;
  font-size: 13px;
  overflow: hidden;
}


.pre-header .info,
.pre-header .social-media {
  list-style: none;
  white-space: nowrap;
  margin: 0;
  padding: 0;
}

.pre-header .info li,
.pre-header .social-media li {
  display: inline-block;
  margin-right: 15px;
}

.pre-header .info li a,
.pre-header .social-media li a {
  color: #333;
  text-decoration: none;
  transition: color 0.2s ease;
}

.pre-header .info li a:hover,
.pre-header .social-media li a:hover {
  color: #007bff;
}

.pre-header .social-media li a i {
  font-size: 16px;
}

/* Float right on the right side section */
.pre-header .social-media {
  text-align: right;
  margin-top: 9;
}

.pre-header .info span {
    margin-left: 5px;
}

/* Responsive behavior */
@media (max-width: 768px) {
  .pre-header {
    height: 36px;
    line-height: 36px;
  }

  /* Kill bootstrap layout influence */
  .pre-header .row,
  .pre-header [class*="col-"] {
    all: unset;
  }

  /* Create positioning context */
  .pre-header .container {
    position: relative;
    height: 36px;
    padding: 0;
  }

  /* LEFT: Report / Sitemap */
  .pre-header .info {
    position: absolute;
    left: 10px;
    top: 9;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  /* RIGHT: Social icons */
  .pre-header .social-media {
    position: absolute;
    right: 10px;
    top: 0;
    display: flex;
    align-items: center;
    white-space: nowrap;
  }

  .pre-header li {
    margin: 0 10px 0 0;
  }

  .pre-header .social-media li {
    margin: 0 05px 0 10px;
  }

  .pre-header .info li {
    margin-left: 5px;
  }

  /* Hide text, keep icons */
  .pre-header .info span {
    display: none;
  }
}

/* Pre-header height */
.pre-header {
  height: 35px;
}

/* Push navbar below pre-header */
.navbar-fixed-top {
  top: 35px;
}