/** @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: #001050; /* Light brown/caramel color */
  color: #ffffff; /* Dark text */
  min-height: 100vh; /* Full viewport height */
}

.nav-item:hover {
  background-color: #0050ff; /* 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: #00ff00; /* 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 {
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    transition: box-shadow 0.3s, background-color 0.3s;
}

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

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

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

.card-branch-store {
    background-color: rgb(255, 100, 30);
    color: white;
}

.card-office {
    background-color: rgb(0, 40, 160);
    color: white;
}

.card-inventory {
    background-color: yellow;
    color: black;

}

.card-accounting {
    background-color: rgb(0, 100, 30);
    color: white;
}

.card-hrd {
  background-color: rgb(50, 50, 170);
  color: white;

}

.card-system-administrator {
  background-color: rgb(30, 30, 30);
  color: white;
}


.card-security-admin {
  background-color: rgb(10, 10, 10);
  color: white;
}

.card-customer-service {
  background-color: rgb(150, 30, 0);
  color: white;
}

.card-warehouse {
  background-color: rgb(0, 100, 90);
  color: white;
}

.card-default {

  background-color: rgb(0, 40, 130);
  color: white;
}