html, body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
}

footer {
  margin-top: auto;
}

.navbar-nav .nav-link:hover {
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 5px;
}

.navbar-nav .dropdown-menu {
  background-color: #007bff; /* Matching the navbar color */
  border: none;
}

.navbar-nav .dropdown-item:hover {
  background-color: #0056b3; /* Darker shade on hover */
}

.navbar-brand img {
  margin-right: 10px;
}

.utility-card .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.offcanvas-body {
  overflow-y: auto;
}
.utility-card img {
  height: 200px; /* Adjust as needed */
  object-fit: cover; /* Ensures the image fills the area */
}