/* ========================================
Navbar
======================================== */

.navbar{

  position:fixed;

  top:0;
  left:0;
  right:0;

  z-index:1000;

  background:
    rgba(
      255,
      255,
      255,
      .75
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

}

.navbar-brand{

  display:flex;

  align-items:center;

}

.logo{

  display:flex;

  align-items:center;

  text-decoration:none;

}

/* ========================================
Logo
======================================== */

.logo-image{

  height:42px;

  width:auto;

  display:block;

}

.logo-text{

  font-size:24px;

  font-weight:700;

  line-height:1;

}

/* ========================================
Navigation
======================================== */

.navbar-nav{

  display:flex;

  align-items:center;

  gap:32px;

}

.navbar-nav .nav-item{

  display:flex;

  align-items:center;

}

.nav-link{

  color:#111827;

  font-weight:500;

  text-decoration:none;

  transition:.2s;

}

.nav-link:hover{

  opacity:.7;

}

.nav-link,
.nav-btn{

  display:flex;
  align-items:center;
   justify-content:center;

}

.nav-link i,
.nav-btn i{

  font-size:22px;

  line-height:1;

  position:relative;

  top:1px;
}

/* ========================================
Button
======================================== */

.nav-btn{

  margin-left:12px;

}

/* ========================================
Mobile
======================================== */

@media(max-width:991px){

  .navbar{

    min-height:72px;

    padding:12px 0;

  }

  .logo-image{

    height:34px;

  }

  .navbar-nav{

    gap:12px;

    margin-top:20px;

  }

  .nav-btn{

    margin-left:0;

    margin-top:12px;

  }

}