/** @format */

.custom-img {
  width: 100%;
  max-width: 100%;
}

@media (max-width: 400px) {
  /* Small devices */
  .custom-img {
    max-width: 200px;
  }
}

@media (min-width: 577px) and (max-width: 768px) {
  /* Medium devices */
  .custom-img {
    max-width: 350px;
  }
}

@media (min-width: 769px) {
  /* Large devices */
  .custom-img {
    max-width: 400px;
  }
}

.left-panel {
  background-color: #00dd20; /* Light brown/caramel color */
  color: #343a40; /* Dark text */
  min-height: 100vh; /* Full viewport height */
}

.nav-item:hover {
  background-color: #009305; /* Custom color for hover state */
  color: rgb(255, 255, 255); /* White text for contrast */
}

.nav-link {
  color: white; /* Default color for nav links */
}

.nav-link:hover,
.nav-link:focus {
  color: #ffffff; /* Hover and focus state color */
}

.nav-link.active {
  color: #00ee00; /* Active link color */
}

.main-content {
  background-color: #f7f1f1; /* Light background color */
  color: black; /* Black text */
  min-height: 1000px; /* Minimum height */
}

.sub-menu {
  display: none; /* Default state for sub-menu */
}

.carousel-inner img {
  width: 100%;
  height: auto; /* Responsive image in carousel */
}

.card-menu {
  margin: 10px;
  padding: 20px;
  border-radius: 10px;
  transition: box-shadow 0.3s, background-color 0.3s;
}

.card-menu:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  background-color: #f0f0f0;
}

.card-menu a {
  color: inherit;
  text-decoration: none;
}

.card-menu .fa-icon {
  font-size: 50px;
  margin-bottom: 10px;
}

.card-admin {
  background-color: rgb(255, 100, 30); /* Use hex: #FF641E */
  color: white;
}

.card-office {
  background-color: rgb(0, 120, 10); /* Use hex: #00780A */
  color: white;
}

.card-search {
  background-color: yellow; /* Use hex: #FFFF00 */
  color: black;
}

.card-other {
  background-color: rgb(0, 100, 30); /* Use hex: #00641E */
  color: white;
}