:root {
  --orange: #ff5a0a;
  --cream: #f5f4d7;
  --text: #111;
}

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

.home-navbar {
  padding: 20px 0;
  transition: padding .35s ease;
  z-index: 1030;
}

.home-navbar .container {
  transition:
    background .35s ease,
    border-radius .35s ease,
    border-color .35s ease,
    box-shadow .35s ease,
    padding .35s ease;
}

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

.home-navbar.navbar-scrolled {
  padding: 8px 0;
}

.home-navbar.navbar-scrolled .container {

  background: rgba(245, 244, 215, .55);

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

  border: 1px solid rgba(255,255,255,.22);

  border-radius: 999px;

  padding: .45rem 1.6rem;

  box-shadow:
    0 10px 28px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.18);
}

/* =====================================================
   LOGO
===================================================== */

.navbar-brand img {
  width: 72px;
  height: auto;
  transition: width .35s ease;
}

.home-navbar.navbar-scrolled .navbar-brand img {
  width: 60px;
}

/* =====================================================
   NAV LINKS
===================================================== */

.home-navbar .nav-link {
  padding: .55rem .9rem !important;

  color: var(--text);

  font-family: "Inter", sans-serif;
  font-weight: 600;

  transition: color .25s ease;
}

.home-navbar .nav-link:hover,
.home-navbar .nav-link:focus-visible {
  color: var(--orange);
}

/* =====================================================
   DEMO BUTTON
===================================================== */

.demo-btn {

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

  padding: .55rem 1.35rem;

  border-radius: 999px;

  background: var(--orange);
  color: #fff;

  font-family: "Inter", sans-serif;
  font-weight: 700;
  text-decoration: none;

  transition:
    background .25s ease,
    transform .25s ease;
}

.demo-btn:hover,
.demo-btn:focus-visible {
  background: #111;
  color: #fff;
  transform: translateY(-1px);
}

/* =====================================================
   DROPDOWN
===================================================== */

.home-navbar .dropdown-menu {

  margin-top: .75rem;
  padding: .5rem;

  background: rgba(245,244,215,.85);

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

  border: 1px solid rgba(255,255,255,.25);

  border-radius: 18px;

  box-shadow: 0 12px 32px rgba(0,0,0,.08);
}

.home-navbar .dropdown-item {

  border-radius: 10px;

  color: var(--text);

  font-family: "Inter", sans-serif;
  font-size: .9rem;
}

.home-navbar .dropdown-item:hover,
.home-navbar .dropdown-item:focus {

  background: rgba(255,90,10,.10);
  color: var(--orange);
}

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

@media (max-width:991.98px){

  .home-navbar{
    padding:12px 0;
  }

  .home-navbar .container{
    padding-inline:1rem;
  }

  .home-navbar.navbar-scrolled .container{

    border-radius:24px;

    padding:.45rem 1rem;
  }

  .home-navbar .navbar-toggler{

    padding:.35rem;

    border:0;
    box-shadow:none;
  }

  .home-navbar .collapse{

    margin-top:1rem;

    padding:1rem;

    background:rgba(245,244,215,.78);

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

    border:1px solid rgba(255,255,255,.22);

    border-radius:24px;

    box-shadow:
      0 12px 30px rgba(0,0,0,.07),
      inset 0 1px 0 rgba(255,255,255,.18);
  }

  .home-navbar .nav-link{
    padding:.7rem .5rem !important;
  }

  .demo-btn{
    width:100%;
    margin-top:.5rem;
    text-align:center;
  }

  .home-navbar .dropdown-menu{

    margin-top:.35rem;

    border:0;

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

    box-shadow:none;
  }

}