.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: #ddd5ca; /* Light brown/caramel color */
    color: #343a40; /* Dark text */
    min-height: 100vh; /* Full viewport height */
}

.nav-item:hover {
    background-color: #093a05; /* 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: #ffcc00; /* 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 */
}