html, body {
    height: 100%;
    margin: 0;
}

.wrapper {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.content {
    flex: 1;
}

.footer {
    border-top: 1px solid #ccc;
    text-align: center;
    padding: 10px;
}




.navbar {
    transition: all 0.3s ease;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    height: 70%;
}
.navbar-collapse {
    display: flex;
    justify-content: center;
    margin-left:-100px;
}

.navbar-nav {
    display: flex;
    justify-content: center;
    gap: 20px; /* Adjust spacing between links */
}

            /* Navigation Links Hover Effect */
            .nav-link {
                position: relative;
                color: #333;
                font-weight: 500;
                transition: all 0.3s ease;
            }

                .nav-link::before {
                    content: '';
                    position: absolute;
                    width: 0;
                    height: 2px;
                    bottom: -5px;
                    left: 0;
                    background-color: #007bff;
                    transition: width 0.3s ease;
                }

                .nav-link:hover::before {
                    width: 100%;
                    background-color: #0d8e45;
                }

                .nav-link.active {
                    background-color: #d4edda; /* Adjust to desired color */
                    color: #333333 ; /* Ensure text is readable */
                    border-radius: 5px; /* Optional: rounded corners */
                    transition: background-color 0.3s ease; /* Smooth transition */
                }

                .nav-link:hover {
                    color: #0d8e45;
                    transform: translateY(-2px);
                }

            /* Sidebar Toggle Button */
            .sidebar-toggle {
                border: none;
                background-color: transparent;
                color: #6c757d;
                transition: all 0.3s ease;
            }

                .sidebar-toggle:hover {
                    color: #007bff;
                    transform: rotate(90deg);
                }

            /* Logo Styling */
            .navbar-brand img {
                transition: transform 0.3s ease;
            }

                .navbar-brand img:hover {
                    transform: scale(1.05);
                }

            /* User Dropdown Styling */
            .dropdown-menu {
                border: none;
                box-shadow: 0 4px 15px rgba(0,0,0,0.1);
                animation: dropdown-slide 0.3s ease;
            }

            @keyframes dropdown-slide {
                from {
                    opacity: 0;
                    transform: translateY(-10px);
                }

                to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .dropdown-item {
                transition: all 0.3s ease;
            }

                .dropdown-item:hover {
                    background-color: #f8f9fa;
                    color: #007bff;
                    transform: translateX(5px);
                }

            /* Mobile Responsiveness */
            @media (max-width: 991px) {
                .navbar-collapse {
                    background-color: #fff;
                    box-shadow: 0 10px 15px rgba(0,0,0,0.05);
                    border-radius: 0 0 10px 10px;
                    padding: 15px;
                }
            }