@tailwind base;
@tailwind components;
@tailwind utilities;

/* ==============================================
   "इलिसियन" (Elysian) थीम: रंग और आधार
   ============================================== */
:root {
    --slate: #0D1117;
    --slate-light: #E6EDF3;
    --slate-dark: #6E7681;
    --accent: #58A6FF;
    --border-color: rgba(230, 237, 243, 0.1);
}
body {
    background-color: var(--slate);
    color: var(--slate-light);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* माउस को फॉलो करने वाला ग्लो इफ़ेक्ट */
.mouse-glow {
    position: fixed;
    z-index: 0;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, var(--accent) 0%, rgba(88, 166, 255, 0) 60%);
    opacity: 0.1;
    filter: blur(100px);
    transform: translate(-50%, -50%);
    pointer-events: none; /* यह सुनिश्चित करता है कि यह क्लिक करने में बाधा न बने */
    transition: left 0.1s ease-out, top 0.1s ease-out; /* स्मूथ मूवमेंट के लिए */
}

/* ==============================================
   कस्टम कम्पोनेंट्स
   ============================================== */
.hero-title {
    @apply text-5xl md:text-7xl font-black text-white leading-tight tracking-tighter;
}
.hero-subtitle {
    @apply text-lg md:text-xl text-slate-dark max-w-3xl mx-auto mt-6;
}
.cta-button {
    @apply bg-accent text-slate font-bold text-sm px-5 py-2.5 rounded-full transition-transform duration-300 transform hover:scale-105;
}
.bento-grid {
    @apply grid grid-cols-1 lg:grid-cols-3 gap-6;
}
.bento-card {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    padding: 1.75rem;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: transform 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
    display: flex;
    flex-direction: column;
    text-decoration: none; /* लिंक से अंडरलाइन हटाने के लिए */
}
.bento-card:hover {
    transform: translateY(-8px);
    border-color: var(--accent);
    background: linear-gradient(145deg, rgba(88, 166, 255, 0.1), rgba(88, 166, 255, 0.02));
}
.bento-card-large {
    @apply lg:col-span-2; /* बड़ी कार्ड ग्रिड में 2 कॉलम लेगी */
}
.card-icon {
    @apply w-12 h-12 rounded-xl flex items-center justify-center text-2xl mb-5;
}
.card-title {
    @apply text-xl font-bold text-white mb-2;
}
.card-desc {
    @apply text-slate-dark flex-grow; /* यह सुनिश्चित करता है कि टाइटल और एरो के बीच की जगह भर जाए */
}
.card-arrow {
    @apply self-end mt-4 text-slate-dark transition-transform duration-300;
}
.bento-card:hover .card-arrow {
    @apply text-accent transform translate-x-1;
}




/*@tailwind base;*/
/*@tailwind components;*/
/*@tailwind utilities;*/

/* ================== Base & Background Styles ================== */
/*body {*/
/*    -webkit-font-smoothing: antialiased;*/
/*    -moz-osx-font-smoothing: grayscale;*/
/*    overflow-x: hidden;*/
/*}*/

/*.background-grid {*/
/*    position: absolute;*/
/*    top: 0; left: 0; right: 0; bottom: 0;*/
/*    background-image: linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);*/
/*    background-size: 30px 30px;*/
/*}*/

/*.background-gradient {*/
/*    position: fixed;*/
/*    top: 50%; left: 50%;*/
/*    width: 800px; height: 800px;*/
/*    background-image: radial-gradient(circle at center, rgba(13, 110, 253, 0.2), rgba(0, 0, 0, 0) 60%);*/
/*    transform: translate(-50%, -50%);*/
/*    animation: gradient-move 15s cubic-bezier(0.25, 1, 0.5, 1) infinite;*/
/*}*/

/* ================== Custom Components ================== */
/*@layer components {*/
/*    .cta-button {*/
/*        @apply inline-flex items-center justify-center bg-blue-600 text-white font-bold px-8 py-4 rounded-full shadow-[0_10px_30px_-5px_rgba(59,130,246,0.4)] transition-all duration-300 transform hover:scale-105 hover:bg-blue-500;*/
/*    }*/
/*    .section-title {*/
/*        @apply text-4xl md:text-5xl font-bold text-white tracking-tight;*/
/*    }*/
/*    .section-subtitle {*/
/*        @apply mt-4 text-lg text-gray-400 max-w-xl mx-auto;*/
/*    }*/
/*    .tool-card {*/
/*        @apply bg-white/5 border border-white/10 rounded-2xl p-8 backdrop-blur-md shadow-2xl shadow-black/20 transition-all duration-300 transform hover:-translate-y-2 hover:border-blue-500/50;*/
/*    }*/
/*    .tool-icon {*/
/*        @apply w-14 h-14 rounded-full flex items-center justify-center text-2xl mb-5 border border-white/10;*/
/*    }*/
/*    .tool-title {*/
/*        @apply text-xl font-bold text-white mb-2;*/
/*    }*/
/*    .tool-desc {*/
/*        @apply text-gray-400;*/
/*    }*/
/*}*/