/*==================================================
HEADER
==================================================*/

#header {
  position: absolute;

  top: 7px;

  left: 0;

  width: 100%;

  z-index: 999;

  transition: 0.4s;
}

#header.fixed {
  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  background: rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(15px);

  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.08);
}

/*==================================================
NAVBAR
==================================================*/

.navbar {
  padding: 22px 0;
}

.navbar-brand {
  padding: 0;
}

.navbar-brand img {
  height: 75px;

  transition: 0.4s;
}

/*==================================================
MENU
==================================================*/

.navbar-nav {
  gap: 8px;

  align-items: center;
}

.nav-item {
  position: relative;
}

.nav-link {
  position: relative;

  color: #fff;

  font-size: 16px;

  font-weight: 600;

  padding: 12px 18px !important;

  transition: 0.35s;
}

.nav-link:hover {
  color: #fff;
}

.nav-link.active {
  color: #fff;
}

.nav-link::after {
  content: "";

  position: absolute;

  left: 18px;

  bottom: 6px;

  width: 0;

  height: 2px;

  background: #fff;

  transition: 0.4s;
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 50%;
}

/*==================================================
HEADER BUTTON
==================================================*/

.navbar .theme-btn {
  margin-left: 25px;
}

/*==================================================
STICKY HEADER
==================================================*/

#header.fixed .nav-link {
  color: #222;
}

#header.fixed .nav-link:hover {
  color: #0057D9;
}

#header.fixed .nav-link.active {
  color: #0057D9;
}

#header.fixed .nav-link::after {
  background: #0057D9;
}

#header.fixed .navbar-brand img {
  height: 60px;
}

/*==================================================
TOGGLER
==================================================*/

.navbar-toggler {
  border: none;

  box-shadow: none !important;

  padding: 8px;
}

.navbar-toggler i {
  font-size: 28px;

  color: #fff;
}

#header.fixed .navbar-toggler i {
  color: #222;
}

/*==================================================
OFFCANVAS
==================================================*/

.offcanvas {
  width: 320px;
}

.offcanvas-header {
  padding: 20px;

  border-bottom: 1px solid #eee;
}

.offcanvas-header img {
  height: 70px;
}

.offcanvas-body {
  padding: 0;
}

/*==================================================
MOBILE MENU
==================================================*/

.mobile-menu {
  list-style: none;

  margin: 0;

  padding: 0;
}

.mobile-menu li {
  border-bottom: 1px solid #efefef;
}

.mobile-menu li:last-child {
  border-bottom: none;
}

.mobile-menu li a {
  display: block;

  padding: 16px 22px;

  color: #222;

  font-weight: 600;

  transition: 0.3s;
}

.mobile-menu li a:hover {
  color: #0057D9;

  padding-left: 28px;
}

/*==================================================
OFFCANVAS CLOSE BUTTON
==================================================*/

.btn-close {
  box-shadow: none !important;

  opacity: 1;
}

/*==================================================
DROPDOWN (Future Ready)
==================================================*/

.dropdown-menu {
  border: none;

  border-radius: 16px;

  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);

  padding: 15px 0;
}

.dropdown-item {
  padding: 12px 22px;

  font-weight: 500;

  transition: 0.3s;
}

.dropdown-item:hover {
  background: #0057D9;

  color: #fff;
}