/* Top Bar */
.top-bar {
    background-color: var(--color-primary);
    color:var(--white);
  }
  
  .top-bar a {
    text-decoration: none;
    color:var(--white);
    cursor: pointer;
  }
  
  .top-bar i{
    color:white;
  }
  /* Navbar part */
  .offcanvas-header {
    background-color: var(--black);
    color: var(--white);
  }
  
  .offcanvas-body{
    /* background-color:var(--color-primary); */
        color:var(--white);
        .active{
            background-color:var(--color-primary)!important;
            padding:10px;
        }
  }
  .navbar-nav .nav-item .nav-link {
    font-family: Lato, sans-serif;
    font-size: 16px;
    font-weight: 600;
  }
  
  .navbar-nav .nav-item .active {
    background-color:var(--color-primary);
    color:var(--white)!important;
    border-radius: 5px;
  }
  
  .navbar-nav .nav-item .nav-link:hover {
    background-color: var(--color-primary);
    border-radius: 5px;
    color:white;
  }
  
  /* Custom CSS to handle the hover */
  .navbar-nav .nav-item:hover .dropdown-menu {
    display: block;
  }
  
  .dropdown-menu {
    /* background-color: var(--yellow)!important; */
    color:var(--black);
    margin-top: 0;
    max-height: 300px;
    overflow-y: auto;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer and Edge */
  }
  
  /* Hide scrollbar for WebKit browsers */
  .dropdown-menu::-webkit-scrollbar {
    display: none;
  }
  
  .dropdown-menu a {
    font-size: 15px;
    color: var(--black);
    scroll-snap-align: start;
  }
  
  .dropdown-divider {
    width: 100%;
    margin-top: 0;
    padding: 0;
    text-align: center;
  }
  
  /* Hover Trigger (if used) */
  .hover-trigger {
    display: inline-block;
    margin: 100px;
    cursor: pointer;
  }
  
  .hover-trigger:hover + .modal {
    display: block !important;
    opacity: 1;
  }
  
      /* Navbar end */