.navbar-brand img {
            max-height: 50px;
        }

        .navbar .nav-link {
            font-size: 15px;
            color: #6c757d;
            position: relative;
            transition: color 0.3s ease;
        }

    

        .navbar .nav-link:hover {
            color: #009688 !important;
        }

    

        .dropMainClass {
            border: 2px solid #E0E9F6;
            font-size: 11px;
            padding: 4px;
        }
        
        .navbar .nav-link.active {
            color: #3B38A0 !important;
        }

        .navbar .btn-outline-secondary {
            color: #6c757d;
            white-space: nowrap;
            line-height: 1.2;
            padding: 0.375rem 0.75rem; 
            font-size: 0.875rem; 
        }

        .navbar .btn-outline-secondary small {
            font-size: 0.75rem; 
        }

        li {
            list-style: none;
        }
        
        .custom-hover-dropdowns .dropdown-menu-custom {
            position: absolute;
            top: 100%;
            left: 0;
            min-width: 180px;
            background: white;
            padding: 10px 0;
            border-radius: 6px;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            display: none;
            z-index: 1000;
            transition: all 0.2s ease;
        }

        .custom-hover-dropdowns .dropdown-menu-custom .dropdown-item {
            padding: 8px 15px;
            font-size: 0.95rem;
            color: #333;
            text-decoration: none;
        }

        .custom-hover-dropdowns .dropdown-menu-custom .dropdown-item:hover {
            background-color: #f8f9fa;
            color: #3B38A0;
        }

        .custom-hover-dropdowns .dropdown:hover .dropdown-menu-custom {
            display: block;
        }
        
        .vle-animate-btn {
            transition: all 0.4s ease;
            animation: pulseEffect 0.8s ease-in-out infinite;
            animation-delay: 5s;
            animation-iteration-count: infinite;
            animation-fill-mode: both;
        }

        .vle-animate-btn.pulse {
            animation: pulseEffect 0.6s ease-in-out;
        }

        @keyframes pulseEffect {
            0% {
                transform: scale(1);
                box-shadow: 0 0 0px rgba(0, 0, 0, 0);
            }
            50% {
                transform: scale(1.1);
                box-shadow: 0 0 12px #3B38A0;
            }
            100% {
                transform: scale(1);
                box-shadow: 0 0 0px rgba(0, 0, 0, 0);
            }
        }

        .top-bar {
            background-color: #f8f9fa !important;
        }

        .navbar-brand span {
            font-size: 1.8rem;
            font-weight: bold;
        }

        .navbar-nav .nav-link {
            color: #002244 !important;
            font-weight: 500;
            padding-left: 15px !important;
            padding-right: 30px !important;
        }

        .navbar-nav .nav-link:hover {
            color: #3B38A0 !important; 
        }


        .navbar-nav .nav-link.active {
            color: #3B38A0 !important;
        }

        .custom-hover-dropdowns .dropdown-menu-custom {
            display: none;
            position: absolute;
            min-width: 160px;
            box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
            z-index: 1000; 
            background-color: #f9f9f9;
            list-style: none;
            padding: 0;
            margin-top: 5px; 
            border-radius: 5px;
        }

        .custom-hover-dropdowns .dropdown-menu-custom a {
            color: black;
            padding: 10px 15px;
            text-decoration: none;
            display: block;
            white-space: nowrap;
        }

        .custom-hover-dropdowns .dropdown-menu-custom a:hover {
            background-color: #ddd;
        }

        .custom-hover-dropdowns .nav-item.dropdown:hover .dropdown-menu-custom {
            display: block;
        }

        .dropMainClass {
            border: 1px solid #3B38A0;
            color: #3B38A0;
            padding: 8px 15px;
            border-radius: 5px;
            text-align: left;
            line-height: 1.2;
        }

        .dropMainClass:hover {
            color: #fff;
            background-color: #3B38A0;
        }

        .dropMainClass small {
            display: block;
            font-size: 0.75em;
            color: #3B38A0;
        }

        .dropMainClass:hover small {
            display: block;
            font-size: 0.75em;
            color: #fff;
        }
        
        .my-custom-btn {
            background-color: white;
            border: 1px solid #ccc; 
            color: black;
            padding: 5px 15px;
            border-radius: 5px;
            cursor: pointer;
            transition: background-color 0.2s ease;
        }

        @media (max-width: 991.98px) {
            .d-lg-none { display: block !important; }
            .d-none.d-lg-block { display: none !important; }
            .custom-hover-dropdowns { display: none !important; } 

            .navbar-collapse {
                display: flex;
                flex-direction: column;
                position: fixed;
                top: 0;
                left: -100%; 
                bottom: 0;
                width: 75%;
                max-width: 300px; 
                background-color: #ffffff; /* Change mobile menu background to white */
                z-index: 2147483647 !important;
                transition: left 0.3s ease-in-out;
                /*overflow-y: auto; */
                padding: 0;
                height: 100vh !important;
                /*width: 100%;*/
            }

            .navbar-collapse.show {
                left: 0; 
                box-shadow: 5px 0px 15px rgba(0,0,0,0.2); 
            }
            
            .navbar-brand {
                margin-right: auto; 
                padding: 1rem 1rem 0 1rem; 
            }

            .navbar-nav {
                width: 100%;
                padding-top: 2rem;
                padding-left: 25px;
                flex-grow: 1;
                background: #fff !important;
            }

            .navbar-nav .nav-item .nav-link {
                color: #000000 !important; /* Change link color to black for better contrast */
                padding: 15px 20px;
                border-bottom: 1px solid #e0e0e0; /* Use a lighter border color */
                border-radius: 0 !important;
                text-align: left;
                width: 100%;
                background-color: transparent !important;
            }

            .navbar-nav .nav-item:first-child .nav-link {
                border-top: none !important;
            }

            .navbar-nav .nav-link.active {
                background-color: #f0f0f0; /* Change active background color */
            }

            .navbar-nav .nav-link:hover {
                background-color: #f8f9fa; /* Change hover background color */
            }

            .navbar-nav .nav-item.dropdown .nav-link.dropdown-toggle::after {
                position: absolute;
                right: 20px;
                top: 50%;
                transform: translateY(-50%);
            }
            
            .navbar-nav .dropdown-menu,
            .navbar-nav .collapse > .dropdown-menu-custom-mobile {
                position: static !important;
                float: none !important;
                width: 100% !important;
                margin-top: 0 !important;
                border: none !important;
                box-shadow: none !important;
                background-color: transparent !important;
                padding: 0;
            }

            .navbar-nav .dropdown-menu li a.dropdown-item,
            .navbar-nav .dropdown-menu-custom-mobile li a.dropdown-item {
                color: #555 !important; /* Adjust submenu link color */
                padding-left: 40px;
                background-color: #fafafa; /* Adjust submenu background color */
                border-bottom: 1px solid #f0f0f0;
                border-radius: 0 !important;
            }

            .navbar-nav .dropdown-menu li a.dropdown-item:hover,
            .navbar-nav .dropdown-menu-custom-mobile li a.dropdown-item:hover {
                background-color: #e9ecef; /* Adjust submenu hover background color */
            }
            
            .my-mobile-menu-btn {
                display: none; /* Hide the extra login/register buttons */
            }

            .login-btn {
                border: 1px solid #ccc;
                padding: 5px 10px;
                border-radius: 5px;
            }

            .modern-drop-button {
                border: 1px solid #3B38A0;
                color: black;
                padding: 6px 12px;
                border-radius: 5px;
                text-align: center;
                line-height: 1.2;
                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                transition: all 0.2s ease-in-out;
            }

            .modern-drop-button:hover {
                background-color: #3B38A0;
                border-color: #3B38A0;
                box-shadow: 0 4px 8px rgba(0,0,0,0.3);
            }

            .modern-drop-button small {
                display: block;
                font-size: 0.75em;
                color: black;
            }

            .navbar-nav .collapse:not(.show) {
                display: none;
            }

            .navbar-nav .collapse.show {
                display: block;
            }
        }