/* nav bar css */
        .navbar {
            background-color: #1b086a;
            padding: 12px 5%; /* Use % for responsive side padding */
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: sticky; /* Stays visible on scroll */
            top: 0;
            z-index: 1000; /* Ensures navbar is above other content */
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle depth */
        }

        .navbar img {
            height: 65px; /* Slightly smaller for elegance */
            transition: transform 0.3s ease; /* For hover effect */
        }

        .navbar a {
            color: white;
            text-decoration: none;
            padding: 8px 16px;
            margin: 0 5px;
            font-size: 16px;
            font-weight: 500; /* Medium weight for readability */
            border-radius: 4px; /* Soft rounded corners */
            transition: all 0.3s ease;
        }

        .navbar a:hover {
            background-color: rgba(255, 255, 255, 0.1); /* Subtle hover */
            transform: translateY(-1px); /* Light lift */
        }

            /* Active link highlight */
        .navbar a.active {
            background-color: rgba(255, 255, 255, 0.2);
        }

            /* Logo hover effect */
        .navbar img:hover {
            transform: scale(1.05); 
        }
        
        .logo-container {
            display: flex;
            align-items: center;
        }

        .button {  
            background: linear-gradient(90deg, #6e45e2, #88d3ce);  
            transition: background 0.5s ease;  
            }  
        .button:hover {  
            background: linear-gradient(90deg, #88d3ce, #6e45e2);  
        }  

        .mobile-menu-btn {
            display: none; /* Hidden on desktop */
            background: none;
            border: none;
            color: white;
            font-size: 24px;
            cursor: pointer;
        }


    /* Stack links vertically on mobile */
    @media (max-width: 768px) {
        .navbar div:last-child {
            display: none; /* Hide links by default */
            flex-direction: column;
            position: absolute;
            top: 70px;
            left: 0;
            width: 100%;
            background-color: #1b086a;
            padding: 10px 0;
        }

        .navbar div:last-child.show {
            display: flex; /* Toggle with JS */
        }

        .mobile-menu-btn {
            display: block;
        }
        .navbar img {
            height: 40px; /* Smaller height for mobile devices */
        }
    }
    /* end nav bar css */