html { scroll-behavior: smooth; }

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #e7b503; }
::-webkit-scrollbar-thumb { background: #cc2a01; border-radius: 10px; }

/* Spiritual Divider */
.divider-om::after { 
    content: "🕉️"; display: block; text-align: center; 
    font-size: 1.5rem; margin: 1.5rem 0; color: #ea580c; 
}
.divider-om::before { 
    content: ""; height: 1px; 
    background: linear-gradient(to right, transparent, #ea580c, transparent); 
    display: block; margin-bottom: -1.2rem; 
}

/* Audio Highlight Style (Yellow Background) */
.highlight-active { 
    background-color: #fef08a; /* Yellow-200 */
    color: #000;
    border-left: 4px solid #ea580c;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* NEW: Sloka Line Highlight Style (For individual line recitation) */
.sloka-highlight-active {
    background-color: #d8b4fe; /* Violet-300 */
    color: #4c1d95; /* Violet-900 */
    border-radius: 6px;
    transition: background-color 0.3s ease;
}
.sloka-line:hover {
    background-color: #f7e1ff; /* Lightest violet on hover */
    cursor: pointer;
    border-radius: 6px;
    transition: background-color 0.2s;
}

/* AI Guru Chat Animations */
@keyframes fadeIn { 
    from { opacity: 0; transform: translateY(10px); } 
    to { opacity: 1; transform: translateY(0); } 
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.message-anim { animation: fadeIn 0.3s ease-out forwards; }
.animate-slide-up { animation: slideUp 0.3s ease-out forwards; }



/* Modal Background Blur */
.backdrop-blur-sm { backdrop-filter: blur(4px); }



/* index page css*/
        /* Custom Scrollbar */
        ::-webkit-scrollbar { width: 8px; }
        ::-webkit-scrollbar-track { background: #fff7ed; }
        ::-webkit-scrollbar-thumb { background: #ea580c; border-radius: 4px; }
        ::-webkit-scrollbar-thumb:hover { background: #9a3412; }

        .glass-nav {
            background: rgba(255, 255, 255, 0.98);
            backdrop-filter: blur(10px);
            border-bottom: 3px solid #ea580c;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
        }

        .card-hover {
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .card-hover:hover {
            transform: translateY(-8px) scale(1.02);
            box-shadow: 0 20px 25px -5px rgba(234, 88, 12, 0.15), 0 10px 10px -5px rgba(234, 88, 12, 0.1);
            border-color: #fdba74;
        }
        
        /* SVG Animation Classes */
        .svg-icon {
            transition: all 0.5s ease;
        }
        .card-hover:hover .svg-icon {
            transform: scale(1.1) rotate(2deg);
            filter: drop-shadow(0 10px 8px rgba(0,0,0,0.1));
        }