.gradient-bg {
background: linear-gradient(93.64deg, rgba(244, 241, 255, .5), rgba(250, 249, 255, .5) 57.58%, rgba(254, 238, 242, .5) 99.61%), #fff;
}
.dark .gradient-bg {
background: rgb(12, 13, 17) /* bg-gray-900 */
}
  .activeLink{
    color:#1c64f2
  }
@media (max-width: 768px) {
  .sm\:custom-col-width {
    max-width: 380px;
  }
}
/*
.dark\:bg-gray-900:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(17 24 39 / var(--tw-bg-opacity, 1));
}

.dark\:bg-gray-800:is(.dark *) {

    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}

.dark\:text-white:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.dark\:text-gray-300:is(.dark *) {
    --tw-text-opacity: 1;
    color: rgb(209 213 219 / var(--tw-text-opacity, 1));
}
.dark\:bg-dark-100:is(.dark *) {
    --tw-bg-opacity: 1;
    background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1));
}

*/
.animate-fade-in {

animation: fadeIn 1s ease-out forwards;
}

.animate-fade-in-delay {
animation: fadeIn 1s ease-out 0.3s forwards;
opacity: 0;
}

.animate-fade-in-delay-2 {
animation: fadeIn 1s ease-out 0.6s forwards;
opacity: 0;
}

.animate-bounce {
animation: bounce 2s infinite;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
40% {transform: translateY(-20px);}
60% {transform: translateY(-10px);}
}

.typing-cursor {
opacity: 1;
animation: blink 0.7s infinite;
}

@keyframes blink {
0%, 100% { opacity: 1; }
50% { opacity: 0; }
}

 /* Overlay for sidebar */
        .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, 0.5);
            z-index: 40;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.3s ease;
        }
        
        .sidebar-overlay.active {
            opacity: 1;
            pointer-events: auto;
        }
        
        /* Sidebar animation */
        .sidebar {
            transform: translateX(-100%);
            transition: transform 0.3s ease;
            width: 85%;
            max-width: 300px;
        }
        
        .sidebar.active {
            transform: translateX(0);
        }
        
        /* Sticky header with scroll effect */
        .sticky-nav {
            position: sticky;
            top: 0;
            z-index: 30;
            transition: all 0.3s ease;
        }
        
        .scrolled-nav {
            box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
        }
        
        .scrolled-nav-light {
            --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
            --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
        }
        
        .scrolled-nav-dark {
            --tw-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
            --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -1px var(--tw-shadow-color);
        }
        
        /* Smaller text on extra small devices */
        @media (max-width: 360px) {
            .xs-text-sm {
                font-size: 0.875rem;
                line-height: 1.25rem;
            }
            .xs-text-base {
                font-size: 1rem;
                line-height: 1.5rem;
            }
            .xs-px-2 {
                padding-left: 0.5rem;
                padding-right: 0.5rem;
            }
            .xs-py-1 {
                padding-top: 0.25rem;
                padding-bottom: 0.25rem;
            }
        }


        /* Dark mode variant */
.dark .bg-gray-900 {
  background-color: #1a202c;
}

.dark .text-white {
  color: white;
}

#dark-mode-toggle,#mobile-dark-mode-toggle,#sidebar-dark-mode-toggle{
    display:none;
}

#mobile-menu-button svg{
        height: 37px!important;
    width: 46px!important;
}