:root {
            --primary-color: #20B2AA;
            --secondary-color: #FF7F50;
            --background-color: #f8f9fa;
            --text-color: #495057;
            --hover-color: #e67343;
            --dropdown-bg: #F8F9FA;
            --dropdown-border: #ddd;
        }

        header {
            background-color: var(--background-color);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
            position: sticky;
            top: 0;
            z-index: 100;
        }

        .navbar {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.5rem 1rem;
            flex-wrap: wrap;
            position: relative;
        }

        .navbar-brand {
            display: flex;
            align-items: center;
            text-decoration: none;
            flex: 1;
        }

        .text-and-logo {
            display: flex;
            align-items: center;
            gap: 0.5rem; /* Space between text and logos */
        }

        .text-and-logo .text {
            font-weight: bold;
            color: var(--primary-color);
            font-size: 1.5rem;
            line-height: 1.4;
            white-space: nowrap;
            margin-right: 0.75rem;
        }

        .text-and-logo img {
            height: 40px;
            max-width: 100%; /* Ensures logos scale within the available space */
        }

        .text-and-logo img:last-of-type {
            height: 30px; /* Slightly smaller for visual hierarchy */
        }

        .nav-menu {
            display: flex;
            list-style-type: none;
            margin: 0;
            padding: 0;
            flex-wrap: wrap;
            align-items: center;
            gap: 0.5rem;
        }

        .nav-item {
            position: relative;
        }

        .nav-link {
            color: var(--text-color);
            font-size: 1rem;
            text-decoration: none;
            padding: 0.5rem;
            display: block;
            transition: color 0.3s, background-color 0.3s;
        }

        .nav-link:hover {
            color: var(--secondary-color);
            background-color: rgba(255, 127, 80, 0.1); /* subtle background change on hover */
            border-radius: 4px;
        }

        .nav-link .logout-link {
            .............
        }
        .dropdown-menu {
            display: none;
            position: absolute;
            top: 100%;
            left: 0;
            background-color: var(--dropdown-bg);
            box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
            list-style: none;
            padding: 0;
            margin: 0;
            width: 200px;
            z-index: 1000;
            border-radius: 4px;
            opacity: 0;
            transition: opacity 0.3s ease, transform 0.3s ease;
            transform: translateY(10px);
        }

        .dropdown-menu.show {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        .dropdown-menu a {
            color: #000;
            padding: 10px 15px;
            text-decoration: none;
            display: block;
            border-bottom: 1px solid var(--dropdown-border);
            transition: background-color 0.3s, color 0.3s;
        }

        .dropdown-menu a:last-child {
            border-bottom: none;
        }

        .dropdown-menu a:hover {
            background-color: var(--secondary-color);
            color: #fff;
        }

        .nav-item:hover .dropdown-menu {
            display: block;
            opacity: 1;
            transform: translateY(0);
        }

        .login-link {
            background-color: var(--secondary-color);
            color: #fff;
            padding: 10px 15px;
            border-radius: 5px;
            text-decoration: none;
            transition: background-color 0.3s;
        }

        .login-link:hover {
            background-color: var(--hover-color);
            color: #fff;
        }

        .navbar-toggler {
            display: none;
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-color);
            margin-left: auto;
        }


/* Style for the profile picture */
/* Ensure this style is added to the container holding the profile picture and dropdown */
.profile-menu {
    position: relative;
    display: flex;
    align-items: center;
}

/* Style for the profile picture */
.profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--primary-color); /* Optional: adds a border around the profile picture */
}

/* Style for the profile dropdown menu */
.profile-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: -200%; /* Adjust this value to shift the dropdown to the left */
    background-color: var(--dropdown-bg);
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    list-style: none;
    padding: 0;
    margin: 0;
    width: 200px;
    z-index: 1000;
    border-radius: 4px;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    transform: translateY(10px);
    /* Ensure dropdown stays within viewport */
    max-height: 300px; /* Adjust as needed */
    overflow-y: auto; /* Allows scrolling if content overflows */
}

.profile-dropdown.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.profile-dropdown a {
    color: #000;
    padding: 10px 15px;
    text-decoration: none;
    display: block;
    border-bottom: 1px solid var(--dropdown-border);
    transition: background-color 0.3s, color 0.3s;
}

.profile-dropdown a:last-child {
    border-bottom: none;
}

.profile-dropdown a:hover {
    background-color: var(--secondary-color);
    color: #fff;
}

/* Show profile dropdown on hover */
.profile-menu:hover .profile-dropdown {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

        @media (max-width: 768px) {
            .text-and-logo {
                flex-direction: ;
                align-items: center;
                text-align: center;
            }

            .text-and-logo .text {
                font-size: 1.2rem;
                margin-right: 0; /* Remove margin on mobile */
            }

            .nav-menu {
                display: none;
                flex-direction: ;
                width: 100%;
                background-color: var(--background-color);
                position: absolute;
                top: 100%;
                left: 0;
                box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
                padding: 0;
                z-index: 1000;
                gap: 0;
            }

            .nav-menu.active {
                display: flex;
            }

            .nav-item {
                margin: 0;
                width: 100%;
            }

            .dropdown-menu {
                position: static;
                box-shadow: none;
                width: 100%;
                opacity: 1;
                transform: none;
            }

            .dropdown-menu a {
                padding: 10px;
                border-bottom: 1px solid var(--dropdown-border);
            }

            .navbar-toggler {
                display: block;
            }
        }