body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; line-height: 1.6; margin: 0; background-color: #f9f9f9; color: #333; }

/* Header & Top Navigation */
header { background: #1a1a1a; color: #fff; padding: 1.5rem 0; text-align: center; border-bottom: 4px solid #007bff; }
header h1 { margin: 0; font-size: 2rem; }

/* Navbar Wrapper */
.nav-wrapper { position: relative; background: #222; }
.nav-wrapper::after {
    content: "\276F"; 
    position: absolute; top: 0; right: 0; height: 100%; width: 50px;
    background: linear-gradient(to right, rgba(34,34,34,0) 0%, rgba(34,34,34,1) 80%);
    color: #fff; display: flex; align-items: center; justify-content: flex-end;
    padding-right: 15px; box-sizing: border-box; pointer-events: none; font-size: 14px;
}

/* Main Navigation */
nav { 
    display: flex; overflow-x: auto; white-space: nowrap; 
    -webkit-overflow-scrolling: touch; padding-right: 40px; 
}
nav::-webkit-scrollbar { display: none; }
nav { -ms-overflow-style: none; scrollbar-width: none; }
nav a { 
    color: #fff; text-decoration: none; font-weight: bold; font-size: 14px; 
    text-transform: uppercase; padding: 15px 22px; flex-shrink: 0; 
    transition: background 0.3s; border-radius: 0; border-right: 1px solid #333; 
}
nav a:hover { background: #444; }
nav a.active { background: #007bff; color: #fff; }

/* Main Container */
.container { max-width: 900px; margin: 30px auto; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.05); }
h2 { color: #1a1a1a; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px; }
textarea { width: 100%; height: 200px; padding: 15px; margin-bottom: 20px; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; font-family: inherit; resize: vertical; box-sizing: border-box; }
textarea:focus { outline: none; border-color: #007bff; }

/* Stats Box */
.stats-box { display: flex; justify-content: space-around; background: #f0f8ff; padding: 20px; border-radius: 6px; margin-bottom: 30px; border: 1px solid #b3d4fc; }
.stat-item { text-align: center; }
.stat-item span { display: block; font-size: 2rem; font-weight: bold; color: #007bff; }

/* SEO Content */
.seo-content { margin-top: 40px; padding-top: 20px; border-top: 1px solid #eee; }
.seo-content h3 { color: #333; margin-top: 25px; }
.seo-content p, .seo-content ul { color: #555; text-align: justify; }

/* Footer */
footer {
    text-align: center;
    padding: 20px;
    background-color: #1a1a1a;
    color: #bbb;
}

.footer-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px; /* Links ke darmiyan fasla */
    margin-bottom: 15px;
}

/* Pipe (|) ko mobile aur desktop dono par khatam kar ke flex gap use karna behtareen hai */
.footer-links a {
    color: #ccc;
    text-decoration: none;
    font-size: 14px;
}

.footer-links a:hover {
    color: #007bff;
}

.footer-copyright {
    font-size: 12px;
    color: #777;
    border-top: 1px solid #333;
    padding-top: 15px;
    margin-top: 10px;
}
/* Mobile Responsiveness */
@media (max-width: 600px) {
    .stats-box { flex-direction: column; gap: 15px; }
    .footer-links a { display: block; margin: 10px 0; }
}