.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  transition: background-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  padding: 12px 0;
}

.transparent-header {
  background-color: rgba(0, 0, 0, 0);
  box-shadow: none;
  backdrop-filter: none;
}

.scrolled-header {
  background-color: rgba(26, 26, 26, .92);
  backdrop-filter: saturate(140%) blur(6px);
  box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}

.site-header .logo img {
  height: 50px;
  transition: transform .25s ease;
}

.scrolled-header .logo img {
  transform: scale(.96);
}

.main-nav ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

.main-nav ul li {
  margin-left: 26px;
  position: relative;
}

.main-nav ul li a {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: color .25s ease;
}

.main-nav ul li a:hover {
  color: #ffcc4d;
}

/* Active menu underline */
.main-nav li.active a {
  color: #ffcc4d;
}

.main-nav li.active a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 3px;
  background: #ffcc4d;
  border-radius: 2px;
}

/* Hover underline */
.main-nav li:not(.active) a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -6px;
  height: 3px;
  background: #ffcc4d;
  border-radius: 2px;
  transition: right .25s ease;
  opacity: .85;
}

.main-nav li:not(.active) a:hover::after {
  right: 0;
}

body {
  scroll-padding-top: 70px;
}