#navbar{
  background:linear-gradient(90deg,#db1e25,#7f1d1d);
  padding:10px 0;
  z-index:9999;
}

#navbar.scrolled{
  background:#fff;
  box-shadow:0 5px 20px rgba(0,0,0,0.08);
}

.logo-box{
  width:46px;
}

.logo-red{ display:none; }
.logo-white{ display:block; }

.nav-link{
  color:#fff !important;
  margin:0 10px;
  position:relative;
}

.nav-link::after{
  content:"";
  position:absolute;
  width:0;
  height:2px;
  bottom:-5px;
  left:0;
  background:#fff;
  transition:0.3s;
}

.nav-link:hover::after{
  width:100%;
}

.nav-cta{
  background:#dc2626;
  padding:6px 14px;
  border-radius:6px;
  color:#fff;
}

@media(max-width:991px){
  #navbar{
    background:#fff !important;
  }

  .nav-link{
    color:#db1e25 !important;
  }

  .logo-white{ display:none; }
  .logo-red{ display:block; }
}


/* CTA BUTTON */
.nav-cta{
    background:#dc2626;
    border:none;
    padding:6px 14px;
    border-radius:6px;
    font-weight:600;
}

.nav-cta:hover{
    background:#991b1b;
}

/* DROPDOWN */
.dropdown-menu{
    background:#ffffff;
    border:none;
    border-radius:10px;
    padding:10px 0;
}

.dropdown-item{
    color:#dc2626;
    font-weight:500;
    padding:10px 20px;
}

.dropdown-item:hover{
    background:#fee2e2;
    color:#991b1b;
}

/* TOGGLER FIX (REMOVE BOOTSTRAP STYLE) */
.navbar-toggler{
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;
}

.navbar-toggler:focus,
.navbar-toggler:active{
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;
}

/* CUSTOM ICON */
.toggler-icon{
    width:30px;
    height:3px;
    background:#fff;
    display:block;
    margin:5px;
    transition:0.3s;
}

/* ================= MOBILE & TABLET ================= */
@media (max-width:991px){

    /* NAVBAR WHITE */
    #navbar{
        background:#ffffff !important;
    }

    /* CONTAINER */
    .container{
        padding-left:20px;
        padding-right:20px;
    }

    /* MENU BOX */
    .navbar-nav{
        background:#fff;
        padding:10px;
        border-radius:10px;
        margin-top:0px;
    }

    /* LINKS */
    .nav-link{
        color:#db1e25 !important;
        margin:10px 0;
    }

    /* UNDERLINE */
    .nav-link::after{
        background:#dc2626;
    }

    /* BRAND */
    .brand-text{
        color:#db1e25;
    }

    /* ICON */
    .toggler-icon{
        background:#db1e25;
    }

    /* LOGO SWITCH */
    .logo-white{
        display:none;
    }

    .logo-red{
        display:block;
    }
}
.login-box{
  max-width:400px;
  margin:100px auto;
  padding:30px;
  background:#fff;
  border-radius:10px;
  box-shadow:0 5px 20px rgba(0,0,0,0.1);
}