@import url('[https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap](https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap)');

/* --- Reset & Global Styles --- */
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Inter', sans-serif; background-color: #F8FAFC; color: #334155; display: flex; flex-direction: column; min-height: 100vh; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; padding: 0; margin: 0; }

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: #c1c1c1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #a8a8a8; }

/* --- Utility Classes --- */
.text-center { text-align: center; }
.font-bold { font-weight: 700; }
.font-semibold { font-weight: 600; }
.text-sm { font-size: 0.875rem; }
.text-xs { font-size: 0.75rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mb-6 { margin-bottom: 1.5rem; }
.mb-8 { margin-bottom: 2rem; }
.mt-4 { margin-top: 1rem; }
.mt-12 { margin-top: 3rem; }

/* --- Colors --- */
.text-primary { color: #4F46E5; }
.text-blue-500 { color: #3b82f6; }
.text-blue-600 { color: #2563eb; }
.text-gray-400 { color: #9ca3af; }
.text-gray-500 { color: #6b7280; }
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-800 { color: #1f2937; }
.text-red-500 { color: #ef4444; }

/* --- Navbar --- */
.navbar {
    background-color: #ffffff;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative; /* Menu positioning ke liye zaroori hai */
}

.brand { display: flex; align-items: center; gap: 0.5rem; color: #4F46E5; font-weight: 700; font-size: 1.25rem; }
.brand-icon { background-color: #2563eb; color: #ffffff; border-radius: 0.25rem; padding: 0.125rem 0.5rem; font-size: 0.875rem; font-family: monospace; }
.nav-links { display: flex; gap: 1.5rem; font-size: 0.875rem; color: #4b5563; font-weight: 500; }
.nav-links a { display: flex; align-items: center; gap: 0.25rem; transition: color 0.2s; }
.nav-links a:hover { color: #4F46E5; }
.mobile-menu { display: none; cursor: pointer; color: #4b5563; }

/* --- Main Layout --- */
.main-content { flex-grow: 1; display: flex; flex-direction: column; align-items: center; padding: 2.5rem 1rem; }
.header-section { text-align: center; margin-bottom: 2.5rem; max-width: 42rem; }
.header-title { font-size: 2.25rem; font-weight: 700; color: #2563eb; margin-bottom: 0.75rem; }
.header-desc { color: #6b7280; font-size: 1rem; line-height: 1.5; }

/* --- Calculator Grid & Cards --- */
.calculator-container { width: 100%; max-width: 64rem; display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.card { background-color: #ffffff; border-radius: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #f3f4f6; padding: 2rem; }
.card-title { font-size: 1.125rem; font-weight: 700; color: #1f2937; margin-bottom: 0.5rem; display: flex; align-items: center; gap: 0.75rem; }
.card-subtitle { font-size: 0.75rem; color: #6b7280; margin-bottom: 1.5rem; }

/* --- Colored Icons --- */
.icon-box { width: 2rem; height: 2rem; display: flex; align-items: center; justify-content: center; border-radius: 0.5rem; font-size: 0.875rem; }
.icon-box-sm { width: 1.5rem; height: 1.5rem; border-radius: 50%; font-size: 0.75rem; display: flex; align-items: center; justify-content: center; }
.svg-icon { width: 1.25em; height: 1.25em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.svg-icon-sm { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.bg-blue-light { background-color: #dbeafe; color: #2563eb; } .bg-indigo-light { background-color: #e0e7ff; color: #4f46e5; } .bg-amber-light { background-color: #fef3c7; color: #d97706; } .bg-pink-light { background-color: #fce7f3; color: #db2777; } .bg-emerald-light { background-color: #d1fae5; color: #059669; } .bg-cyan-light { background-color: #cffafe; color: #0891b2; } .bg-teal-light { background-color: #ccfbf1; color: #0d9488; } .bg-orange-light { background-color: #ffedd5; color: #ea580c; } .bg-rose-light { background-color: #ffe4e6; color: #e11d48; } .bg-purple-light { background-color: #f3e8ff; color: #9333ea; }

/* --- Form Controls --- */
.form-group label { display: block; font-size: 0.875rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; }
.input-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; }
.select-wrapper { position: relative; }
.form-control { width: 100%; appearance: none; border: 1px solid #d1d5db; color: #374151; padding: 0.625rem 0.75rem; border-radius: 0.5rem; font-size: 0.875rem; background-color: #ffffff; cursor: pointer; font-family: inherit; }
.form-control:focus { outline: none; border-color: #4F46E5; box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2); }
.select-icon { position: absolute; right: 0.75rem; top: 50%; transform: translateY(-50%); color: #6b7280; pointer-events: none; }

/* --- Buttons --- */
.btn-primary { width: 100%; background-color: #2563eb; color: #ffffff; font-weight: 600; padding: 0.75rem; border-radius: 0.5rem; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 0.5rem; transition: background-color 0.2s; font-size: 1rem; margin-bottom: 2rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.btn-primary:hover { background-color: #1d4ed8; }

/* --- Result Boxes --- */
.result-box { background-color: #f9fafb; border-radius: 0.75rem; padding: 1rem; border: 1px solid #f3f4f6; margin-bottom: 1rem; }
.result-box.gradient { background: linear-gradient(to right, #faf5ff, #fdf2f8); border-color: #f3e8ff; }
.result-box-title { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; display: flex; align-items: center; gap: 0.5rem; }
.result-box-title.gray { color: #6b7280; } .result-box-title.purple { color: #9333ea; }
.result-value { font-size: 0.875rem; font-weight: 600; color: #1f2937; }
.result-value.purple { color: #6b21a8; }
.val-large { font-size: 1.125rem; font-weight: 700; color: #2563eb; }

/* --- Breakdown List --- */
.breakdown-list { display: flex; flex-direction: column; gap: 0.75rem; }
.breakdown-item { display: flex; align-items: center; justify-content: space-between; padding: 0.875rem; border: 1px solid #f3f4f6; border-radius: 0.5rem; background-color: #f9fafb; transition: box-shadow 0.2s; }
.breakdown-item:hover { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.breakdown-label { display: flex; align-items: center; gap: 0.75rem; color: #4b5563; font-weight: 500; font-size: 0.875rem; }
.breakdown-val { font-weight: 700; color: #1f2937; }
.breakdown-val.blue { color: #2563eb; }

/* --- Informational Pages / Info Section --- */
.info-section { width: 100%; max-width: 56rem; margin-top: 5rem; display: flex; flex-direction: column; gap: 2rem; }
.info-title { font-size: 1.875rem; font-weight: 700; color: #2563eb; text-align: center; margin-bottom: 2.5rem; }
.info-card { background-color: #ffffff; border-radius: 1rem; box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); border: 1px solid #f3f4f6; padding: 2rem; }
.info-card h3 { font-size: 1.25rem; font-weight: 700; color: #1f2937; margin-bottom: 1rem; }
.info-card p { color: #4b5563; font-size: 0.875rem; margin-bottom: 1rem; line-height: 1.5; }
.info-list { list-style: none; padding: 0; margin: 0; }
.info-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.875rem; color: #4b5563; margin-bottom: 0.75rem; line-height: 1.5; }
.bullet { width: 6px; height: 6px; background-color: #3b82f6; border-radius: 2px; margin-top: 6px; flex-shrink: 0; }
.highlight { color: #2563eb; font-weight: 600; }

/* --- About/Contact/Disclaimer Container --- */
.page-container { width: 100%; max-width: 56rem; background-color: #ffffff; padding: 3rem; border-radius: 1rem; border: 1px solid #e5e7eb; margin: 2rem 0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.page-title { font-size: 2rem; font-weight: 700; color: #1f2937; margin-bottom: 1.5rem; border-bottom: 2px solid #eff6ff; padding-bottom: 1rem; }
.page-content h2 { font-size: 1.25rem; color: #2563eb; margin-top: 2rem; margin-bottom: 1rem; }
.page-content p { color: #4b5563; line-height: 1.7; margin-bottom: 1rem; font-size: 0.95rem; }
.page-content ul { margin-left: 1.5rem; margin-bottom: 1rem; list-style-type: disc; color: #4b5563; line-height: 1.7; }

/* --- Footer --- */
.footer { background-color: #1e2330; color: #ffffff; padding: 3.5rem 1.5rem 2rem 1.5rem; margin-top: auto; width: 100%; }
.footer-container { max-width: 72rem; margin: 0 auto; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; border-bottom: 1px solid #374151; padding-bottom: 2.5rem; margin-bottom: 2.5rem; }
.footer-brand { margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; }
.footer-desc { color: #9ca3af; font-size: 0.875rem; line-height: 1.6; margin-bottom: 1.5rem; }
.social-links { display: flex; gap: 0.75rem; }
.social-btn { width: 2.25rem; height: 2.25rem; border-radius: 50%; background-color: #374151; display: flex; align-items: center; justify-content: center; transition: background-color 0.3s; color: #ffffff; }
.social-btn:hover { background-color: #2563eb; }
.social-btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.footer-col-title { font-size: 1.125rem; font-weight: 700; color: #f3f4f6; margin-bottom: 1.25rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.footer-links a { color: #9ca3af; font-size: 0.875rem; transition: color 0.2s; display: flex; align-items: center; gap: 0.5rem; }
.footer-links a:hover { color: #60a5fa; }
.footer-bottom { display: flex; justify-content: space-between; font-size: 0.75rem; color: #6b7280; }

/* =========================================
   MOBILE MENU & RESPONSIVE QUERIES (FIXED)
   ========================================= */
@media (max-width: 768px) {
    .navbar { 
        padding: 1rem; 
        position: relative; 
    }
    
    .nav-links { 
        display: none; 
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        flex-direction: column;
        padding: 1.5rem;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
        z-index: 999;
        gap: 1rem; /* Menu items ke beech ka gap */
    }
    
    
    .nav-links.active { 
        display: flex; 
    }
    
    .mobile-menu { 
        display: block; 
    }
    
    .calculator-container { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 0.5rem; }
    .header-title { font-size: 1.875rem; }
    .page-container { padding: 1.5rem; }
}