
       
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }
       
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background-color: #4338ca;
            transition: width 0.3s ease;
        }
       
        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }
       
        .nav-link.active {
            color: #4338ca;
        }


        .dark .nav-link {
            color: #cbd5e1;
        }


        .dark .nav-link:hover {
            color: #a5b4fc;
        }


        .dark .nav-link.active {
            color: #a5b4fc;
        }


        .dark .nav-link::after {
            background-color: #a5b4fc;
        }
       
        /* Smooth transition for mobile menu */
        #mobile-menu {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.5s ease;
        }
       
        #mobile-menu.open {
            max-height: 600px;
        }


        /* Dropdown animations */
        .nav-dropdown-menu {
            opacity: 0;
            visibility: hidden;
            transform: translateY(-10px);
            transition: all 0.3s ease;
        }


        .nav-dropdown:hover .nav-dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }


        /* Mobile nav-dropdown animations */
        .mobile-nav-dropdown-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease;
        }


        .mobile-nav-dropdown.open .mobile-nav-dropdown-content {
            max-height: 300px;
        }


        .mobile-nav-dropdown-arrow {
            transition: transform 0.3s ease;
        }


        .mobile-nav-dropdown.open .mobile-nav-dropdown-arrow {
            transform: rotate(180deg);
        }

    /* For save icon */
    .overlay{
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.7);
            align-items: center;
            justify-content: center;
        }

/* File drop zone */
        .file-drop-zone {
            border: 2px dashed #e5e7eb;
            transition: all 0.3s ease;
        }
        
        .file-drop-zone.dragover {
            border-color: #4338ca;
            background-color: rgba(67, 56, 202, 0.05);
        }

        .overlay-background {
       background: rgba(0, 0, 0, 0.5);
            backdrop-filter: blur(4px);
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            z-index: 1000;
    }

      