/* Mobile menu animation */
.mobile-menu {
    transition: all 0.3s ease-in-out;
}

/* Active mobile menu item */
.mobile-menu a.active {
    background-color: #f0f9ff;
    color: #3b82f6;
}

/* Optional: Add smooth transition for menu items */
.mobile-menu a {
    transition: all 0.2s ease;
}

/* Optional: Add hover effect for the hamburger button */
.mobile-menu-button {
    transition: all 0.2s ease;
}

.mobile-menu-button:hover {
    transform: scale(1.1);
}

/* Logo specific styles */
.logo-image {
    height: 48px; /* or your preferred size */
    width: auto;
    /* Add any additional custom styles */
}

:root {
    --primary-purple: #7C3AED; /* Adjust this to match your logo's purple */
    --primary-purple-dark: #6D28D9;
    --primary-purple-light: #DDD6FE;
}

/* Active state for navigation */
.nav-link.active {
    color: var(--primary-purple);
    border-color: var(--primary-purple);
}

/* Hover effects */
.hover-purple:hover {
    color: var(--primary-purple);
}

/* Button styles */
.btn-primary {
    background-color: var(--primary-purple);
    color: white;
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background-color: var(--primary-purple-dark);
}