header{
    background-color: var(--primary-light-color); /* Dark background */
 
}
header .navbar {
    background-color: var(--primary-light-color); /* Dark background */
    top: 0; /* Stick to the top */
    left: 0; /* Align to left */
    right: 0; /* Align to right */
    z-index: 1000; /* Ensure it stays above other elements */
    transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0); /* Initial shadow */
    position: fixed; /* Make navbar fixed */
    border-bottom: 1px solid #ddd;
    margin-top: 50px;
  }
  header .navbar.scrolled {
 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* Shadow effect on scroll */
   
    transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition for scrolling */
  }
  header .navbar-nav .nav-link {
    color: #000; /* White text for links */
  }
  header .navbar-nav .nav-link:hover {
    color: var(--primary-color); /* Blue color on hover */
  }
  header .offcanvas {
    background-color: var(--primary-light-color); /* Offcanvas background */
  }
  header .offcanvas-header,
  header .offcanvas-body {
    color: #000; /* White text in offcanvas */
  }

header .offcanvas-header{
    margin-top: 50px;
}
  .navbar-brand{
    color: #000;
  }
  header .navbar-nav li{color: #000;}

  header .navbar {padding: 0px 20px;margin-bottom: 120px;}
  .navbar-toggler:focus,.btn-close:focus {
    outline: none; /* Remove the outline */
    box-shadow: none; /* Remove any box shadow */
}
header  nav ul li a:hover{
    color: var(--primary-color) !important;
    font-weight: 600;
    font-size: 18px;
  }
  
header  nav ul .active > a,header  ul.navbar-nav  .active > a{
  color: var(--primary-color) !important;
  font-weight: 600;
  font-size: 18px;
 
}
/* Exclude the hover effect from the profile dropdown image */
header nav ul li.dropdown a:hover {
  transform: none; /* Disable scaling on image hover */
  transition: none; /* Disable hover transitions for the image */
}
header  nav ul.dropdown-menu li a:hover{
  color: #fff !important;
  background-color: rgba(255, 255, 255, .15);
 
}
header  nav ul.dropdown-menu .active a{
  color: #fff !important;
  background-color: rgba(255, 255, 255, .15);

}

header  nav ul li a#profileDropdown:hover{
    color: var(--primary-color) !important;
    font-weight: 500 !important;
    font-size: 14px !important;
  }
 header  nav ul .active > a#profileDropdown{
      font-size: 14px !important;
 }

.img-cover{
  object-fit: cover;
}





    /* Blog submenu styling */
        #offcanvasNavbar #blogCollapse .nav-link {
            font-size: 0.95rem;
            padding-left: 1.25rem;
            /*color: #ccc;*/

        }

        #offcanvasNavbar #blogCollapse .nav-link.active {
            color: #fff;
            font-weight: 500;
            color: var(--primary-color);
            font-size: 0.95rem;
        }

        header nav ul li.nav-item .custom-dropdon-menu a.dropdown-item {
            color: black !important;
            font-size: 14px !important;

        }

        /* Hover effect */
        #offcanvasNavbar .nav-link:hover {
            color: var(--primary-color);
            background: rgba(255, 255, 255, 0.05);
        }

        /* Custom blog dropdown styling */
        .custom-dropdown-menu {
            min-width: 220px;
            z-index: 1000;
        }

        .navbar-nav .dropdown-item {
            display: block;
            padding: 8px 16px;
            font-size: 14px;
            color: #333;
            text-decoration: none;
        }

        .navbar-nav .dropdown-item:hover {
            background-color: #f8f9fa;
        }

        .navbar-nav .dropdown-item.active {
            background-color: #e9ecef;
            font-weight: 500;
        }

    







@media (max-width: 991.98px) {
  header .navbar {
      padding: 10px;
      /* Adjust other styles if needed */
  }
}