/* =================================== */
/* ===== BASIC & GENERAL STYLING ===== */
/* =================================== */
body {
    font-family: 'Poppins', Arial, sans-serif;
    margin: 0;
    line-height: 1.6;
    background-color: #f4f7fa;
    color: #333;
}
.container {
    width: 80%;
    max-width: 1200px;
    margin: auto;
    overflow: hidden; 
}
main { padding-bottom: 20px; }
h2 { color: #2c3e50; }

/* ============================ */
/* ===== HEADER STYLING ===== */
/* ============================ */
header {
    background:  #2c3e50;
    color: #fff;
    padding: 1rem 0;
    border-bottom: #3498db 4px solid;
    position: relative;
    z-index: 101;
}
header .container { 
    display: flex; 
    justify-content: space-between; 
    align-items: center;
    position: relative; /* YEH NAYI LINE ZAROORI HAI */
}
header a { color: #fff; text-decoration: none; font-size: 16px; }
header .logo h1 { margin: 0; font-size: 24px; }
header nav { display: block; }
header ul { margin: 0; padding: 0; list-style: none; }
header li { 
    display: inline-block; /* inline se inline-block behtar hai */
    margin-left: 25px; 
    
    /* ===== YEH NAYI LINE YAHAN ADD KAREIN ===== */
    white-space: nowrap; 
    /* ========================================= */
}
.nav-toggle, .nav-toggle-label, .mobile-nav { display: none; }

/* =================================== */
/* ===== HOMEPAGE STYLING (DESKTOP) ===== */
/* =================================== */
.hero-section { background: linear-gradient(90deg, #3a7bd5, #00d2ff); color: white; text-align: center; padding: 100px 20px; }
.hero-section h1 { font-size: 3.5em; font-weight: 600; margin-bottom: 10px; color: #fff; }
.search-section { padding: 0; margin-top: -50px; position: relative; z-index: 10; }
.search-section .container { max-width: 600px; }
.search-form { display: flex; align-items: center; background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); border: 1px solid #e9e9e9; padding: 8px; }
.search-icon { padding: 0 10px 0 18px; }
.search-form input[type="text"] { flex-grow: 1; padding: 14px 10px; border: none; background: transparent; font-size: 1em; outline: none; }
.search-form button { padding: 12px 28px; border: none; background: #3498db; color: white; font-weight: bold; cursor: pointer; border-radius: 8px; }
.categories-section { padding: 80px 0; }
.category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }

/* === YAHAN TABDEELI HUI HAI === */
.category-card {
    background:   #cccccc;
    border-radius: 10px;
    padding: 30px;
    text-align: center;
    text-decoration: none;
    color: #333;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* Shuru mein halka sa shadow */
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); /* Ek smooth, professional transition */
}
.category-card:hover {
    transform: translateY(-12px); /* Thora sa oopar uthao */
    box-shadow: 0 14px 28px rgba(0,0,0,0.15), 0 10px 10px rgba(0,0,0,0.12); /* Shadow ko gehra kar do */
}
/* === TABDEELI KHATAM === */

.explore-btn { display: inline-block; background: #3498db; color: white; padding: 12px 25px; border-radius: 50px; text-decoration: none; font-weight: bold; margin-top: 20px; }

/* ================================================= */
/* ===== LIST & DETAIL PAGES STYLING ===== */
/* ================================================= */
.subcategory-list ul { list-style: none; padding: 0; }
.subcategory-list li { background: #fff; border: 1px solid #ddd; padding: 15px 20px; margin-bottom: 10px; border-radius: 5px; }
.subcategory-list li a { text-decoration: none; color: #2980b9; font-size: 18px; font-weight: bold; }
.explanation-box { background: #fff; border: 1px solid #ddd; padding: 20px; margin-top: 20px; border-radius: 5px; }

/* =========================== */
/* ===== FOOTER STYLING ===== */
/* =========================== */
footer { background: #2c3e50; color: #aaa; text-align: center; padding: 2rem 0; position: relative; margin-top: 40px; }

/* ======================================================= */
/* ===== RESPONSIVE DESIGN (MEDIA QUERIES) ===== */
/* ======================================================= */
@media (max-width: 768px) {
    .container { width: 90%; overflow: visible; }
    header nav { display: none; }
    .nav-toggle-label { display: block; width: 30px; height: 25px; position: relative; cursor: pointer; }
    .nav-toggle-label span, .nav-toggle-label span::before, .nav-toggle-label span::after { display: block; background: white; height: 4px; width: 100%; border-radius: 2px; position: absolute; left: 0; transition: all 0.3s ease; }
    .nav-toggle-label span { top: 10px; }
    .nav-toggle-label span::before { content: ''; top: -10px; }
    .nav-toggle-label span::after { content: ''; top: 10px; }
    .mobile-nav { display: block; position: absolute; top: 75px; left: 0; width: 100%; background: #34495e; transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease-in-out; z-index: 100; }
    .mobile-nav ul { width: 100%; list-style: none; padding: 0; margin: 0; }
    .mobile-nav li { text-align: center; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
    .mobile-nav a { display: block; padding: 15px; color: white; }
    .nav-toggle:checked ~ .mobile-nav { transform: scaleY(1); }
    .nav-toggle:checked + .nav-toggle-label span { background: transparent; }
    .nav-toggle:checked + .nav-toggle-label span::before { transform: rotate(45deg); top: 0; }
    .nav-toggle:checked + .nav-toggle-label span::after { transform: rotate(-45deg); top: 0; }
    .hero-section h1 { font-size: 2.2em; }
    .category-grid { grid-template-columns: 1fr; }
    .playground { grid-template-columns: 1fr; }
    .search-section { margin-top: 0; padding: 30px 0; background: #f4f7fa; position: static; }
    .search-section .container { max-width: none; width: 90%; }
    .search-form { flex-direction: column; padding: 0; box-shadow: none; border: none; background: transparent; border-radius: 0; transform: none; }
    .search-icon { display: none; }
    .search-form input[type="text"] { width: 100%; text-align: center; border-radius: 8px; border: 1px solid #ddd; box-sizing: border-box; }
    .search-form button { width: 100%; margin-top: 10px; border-radius: 8px; }
}
/* ======================================= */
/* ===== LOGO + TEXT STYLING (FINAL) ===== */
/* ======================================= */
.logo a.logo-link-container { display: flex; align-items: center; text-decoration: none; }
.logo .logo-circle { width: 50px; height: 50px; border-radius: 50%; overflow: hidden; margin-right: 12px; background-color: #fff; border: 2px solid #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.2); flex-shrink: 0; }
.logo .logo-circle img { width: 100%; height: 100%; object-fit: cover; }
.logo h1 { font-size: 18px; color: #fff; margin: 0; font-weight: 600; white-space: nowrap; }
header li { display: inline; margin-left: 20px; }

/* ======================================= */
/* ===== SCROLLING FOOTER TICKER STYLING ===== */
/* ======================================= */
.scrolling-ticker-wrap { width: 100%; overflow: hidden; padding: 15px 0; background-color: rgba(0, 0, 0, 0.1); border-top: 1px solid #444; border-bottom: 1px solid #444; }
.scrolling-ticker { display: inline-block; white-space: nowrap; animation: ticker-scroll 30s linear infinite; }
.scrolling-ticker-wrap:hover .scrolling-ticker { animation-play-state: paused; }
.ticker-item { display: inline-block; padding: 0 2rem; color: #ddd; font-size: 1.1em; }
@keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
/* Login/Logout links ki styling ke liye */
.user-welcome {
    color: #bdc3c7; /* Halka sa gray color */
    margin-left: 25px;
}

.logout-link {
    background: #c0392b;
    padding: 8px 12px;
    border-radius: 5px;
    transition: background-color 0.3s;
}
.logout-link:hover {
    background: #e74c3c;
}

/* Mobile menu mein logout link ki styling */
.mobile-nav .user-welcome {
    color: #bdc3c7;
    padding: 15px;
    font-weight: bold;
}
.mobile-nav .logout-link {
    background: transparent;
    padding: 15px;
    width: 100%;
    display: block;
}

### **Step 3: JavaScript ka Jadoo (`footer.php`)**

**Action:** Apni `footer.php` file mein, `</body>` se pehle, neeche diya gaya poora JavaScript code paste kar dein.

```javascript
<script>
document.addEventListener('DOMContentLoaded', function(){
    const modal = document.getElementById('auth-modal');
    const loginBtn = document.getElementById('login-btn');
    const signupBtn = document.getElementById('signup-btn');
    const closeBtn = document.querySelector('.close-btn');

    const loginForm = document.getElementById('login-form');
    const signupForm = document.getElementById('signup-form');
    const showSignupLink = document.getElementById('show-signup');
    const showLoginLink = document.getElementById('show-login');

    // Popup kholne wale functions
    function openModal() { modal.style.display = 'flex'; }
    function closeModal() { modal.style.display = 'none'; }
    
    if(loginBtn) loginBtn.addEventListener('click', openModal);
    if(signupBtn) signupBtn.addEventListener('click', function(){
        loginForm.style.display = 'none';
        signupForm.style.display = 'block';
        openModal();
    });
    if(closeBtn) closeBtn.addEventListener('click', closeModal);

    // Form switch karne wale links
    if(showSignupLink) showSignupLink.addEventListener('click', function(e){
        e.preventDefault();
        loginForm.style.display = 'none';
        signupForm.style.display = 'block';
    });
    if(showLoginLink) showLoginLink.addEventListener('click', function(e){
        e.preventDefault();
        signupForm.style.display = 'none';
        loginForm.style.display = 'block';
    });

    // Page refresh kiye baghair form submit karna (AJAX)
    if(loginForm) {
        loginForm.addEventListener('submit', function(e){
            e.preventDefault();
            // Yahan hum AJAX se 'ajax-handler.php' ko data bhejenge
            // Abhi ke liye, hum sirf alert dikha rahe hain
            alert('Login functionality to be added via AJAX!');
        });
    }
    if(signupForm) {
        signupForm.addEventListener('submit', function(e){
            e.preventDefault();
            alert('Signup functionality to be added via AJAX!');
        });
    }
});
</script>
/* ======================================= */
/* ===== LOGO + TEXT STYLING (SQUARE) ===== */
/* ======================================= */

/* This controls the link around the logo and text */
.logo a.logo-link-container {
    display: flex;
    align-items: center;
    text-decoration: none;
}

/* --- THIS IS THE ONLY CHANGE --- */
/* This is the new SQUARE container for the logo */
.logo .logo-circle {
    width: 50px;
    height: 50px;
    /* This creates the rounded square shape instead of a circle */
    border-radius: 8px; 
    overflow: hidden;
    margin-right: 12px;
    background-color: #fff;
    border: 2px solid #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    flex-shrink: 0;
}
/* --- END OF CHANGE --- */


/* This is the image inside the square */
.logo .logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* This is the text next to the logo */
.logo h1 {
    font-size: 18px;
    color: #fff;
    margin: 0;
    font-weight: 600;
    white-space: nowrap;
}

/* This is the spacing for the main menu items */
header li {
    display: inline;
    margin-left: 20px;
}
/* ======================================= */
/* ===== PREVIOUS/NEXT BUTTONS STYLING ===== */
/* ======================================= */
.topic-navigation {
    display: flex;
    justify-content: space-between; /* Ek ko left, doosre ko right bhej dega */
    align-items: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #eee;
}
.topic-nav-btn {
    background-color: #2c3e50;
    color: white;
    padding: 12px 25px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, transform 0.3s;
}
.topic-nav-btn:hover {
    background-color: #34495e;
    transform: translateY(-3px);
}
/* "Next" button ko alag se right side par rakho (agar pichla button na ho) */
.topic-nav-btn.next {
    margin-left: auto;
}
/* ===== SOCIAL LOGIN BUTTONS STYLING ===== */

/* Facebook Login Button ka Design */
.facebook-btn {
    display: block;
    width: 100%;
    padding: 12px;
    margin-top: 10px;
    background-color: #3b5998; /* Facebook ka neela rang */
    color: white;
    text-align: center;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s;
    box-sizing: border-box; /* Yeh zaroori hai takay padding theek kaam kare */
}

.facebook-btn:hover {
    background-color: #2d4373; /* Hover par thora dark neela rang */
}
/* ===== NAYE ATTRACTIVE FOOTER KI STYLING (DARK THEME) ===== */

/* ===== NAYE ATTRACTIVE FOOTER KI STYLING (ANIMATED BLUSH BACKGROUND) ===== */

footer {
    /* Ek se zyada gehre rangon ka gradient banayein */
    background: linear-gradient(-45deg, #232526, #414345, #2c3e50, #4a627a);
    
    /* Background ko uski poori jaga se bara rakhein takay woh move kar sake */
    background-size: 400% 400%;
    
    /* Animation ka naam, muddat (duration), aur loop */
    animation: gradient-blush 15s ease infinite;
    
    /* Baaki ki styling waisi he rahegi */
    color: #bdc3c7;
    padding: 60px 0 20px 0;
    margin-top: 60px;
    font-size: 15px;
    position: relative; /* Animation ke liye zaroori */
}

/* Animation ka kaam (keyframes) */
@keyframes gradient-blush {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.footer-container {
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 40px;
}

.footer-col h3 {
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Heading ke neeche choti si line */
.footer-col h3::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 40px;
    height: 3px;
    background-color: #3498db; /* Neela rang */
}

.footer-col p {
    font-size: 0.95em;
    line-height: 1.8;
}

.footer-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-col ul li {
    margin-bottom: 12px;
}

.footer-col ul a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s, padding-left 0.3s;
}

.footer-col ul a:hover {
    color: #ffffff;
    padding-left: 5px; /* Hover par thora aage ho */
}

/* Newsletter Form ki Styling */
.newsletter-form {
    display: flex;
    margin-top: 10px;
}
.newsletter-form input {
    flex-grow: 1;
    border: 1px solid #4a627a;
    background-color: #3b4e63;
    color: #fff;
    padding: 12px;
    border-radius: 5px 0 0 5px;
    outline: none;
}
.newsletter-form button {
    padding: 12px 18px;
    border: none;
    background-color: #3498db;
    color: white;
    cursor: pointer;
    border-radius: 0 5px 5px 0;
}

/* Copyright Section aur Social Links */
.footer-bottom {
    text-align: center;
    padding-top: 30px;
    border-top: 1px solid #3c4a5c; /* Halki si uper line */
    margin-top: 40px;
}
.footer-bottom .social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}
.footer-bottom p {
    margin: 0;
    font-size: 0.9em;
}

/* ===== FOOTER KE SOCIAL ICONS KI MUKAMMAL STYLING ===== */

.social-links {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}
.social-icon {
    display: inline-block;
    width: 40px;
    height: 40px;
    background-size: 60%;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transition: background-color 0.3s, transform 0.3s;
}
.social-icon:hover {
    background-color: #3498db;
    transform: scale(1.1);
}

/* --- Naye Icons ki images (SVG) --- */

/* Facebook Icon (Pehle jaisa) */
.social-icon.facebook { 
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M22 12c0-5.52-4.48-10-10-10S2 6.48 2 12c0 4.84 3.44 8.87 8 9.8V15H8v-3h2V9.5C10 7.57 11.57 6 13.5 6H16v3h-1.5c-1 0-1.5.5-1.5 1.5V12h3l-.5 3h-2.5v6.8c4.56-.93 8-4.96 8-9.8z"/></svg>'); 
}

/* Naya Instagram Icon */
.social-icon.instagram {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M7.8 2h8.4C19.4 2 22 4.6 22 7.8v8.4a5.8 5.8 0 0 1-5.8 5.8H7.8C4.6 22 2 19.4 2 16.2V7.8A5.8 5.8 0 0 1 7.8 2m-.2 2A3.6 3.6 0 0 0 4 7.6v8.8A3.6 3.6 0 0 0 7.6 20h8.8A3.6 3.6 0 0 0 20 16.4V7.6A3.6 3.6 0 0 0 16.4 4H7.6zm9.65 1.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM12 7a5 5 0 1 1 0 10 5 5 0 0 1 0-10zm0 2a3 3 0 1 0 0 6 3 3 0 0 0 0-6z"/></svg>');
}

/* Naya Google Icon */
.social-icon.google {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="white"><path d="M21.35 11.1H12.18V13.4H18.3C18.11 15.1 17.02 16.5 15.39 17.44V19.63H18.23C20.21 17.86 21.62 15.23 21.62 12.21C21.62 11.76 21.51 11.41 21.35 11.1Z M5.28 17.44C6.91 16.5 7.99 15.1 8.18 13.4H2.45V11.1H8.18C7.99 9.4 6.91 8 5.28 7.06L3.09 4.88C1.08 6.64 0 9.27 0 12.21C0 15.15 1.08 17.78 3.09 19.54L5.28 17.44Z M15.39 7.06C14.07 6.11 12.63 5.62 11.12 5.62C8.61 5.62 6.36 6.94 5.28 8.9L3.09 6.72C5.03 4.63 7.89 3.25 11.12 3.25C13.84 3.25 16.22 4.25 17.96 5.89L15.39 7.06Z"/></svg>');
}
/* ===== HEADER LAYOUT KO THEEK KARNE KA CODE ===== */

/* Header ke main container ko Flexbox banayein */
.header-content {
    display: flex;
    justify-content: space-between; /* Cheezon ko dono kono par phaila dega */
    align-items: center;
    width: 90%;
    max-width: 1200px;
    margin: auto;
}

/* Beech walay menu ko center mein rakhein */
.nav-menu {
    flex-grow: 1; /* Yeh menu ko beech ki saari khali jagah de dega */
    text-align: center; /* Menu ke items ko center mein rakhein */
}

/* User actions (login/logout) ko dayen taraf rakhein */
.user-actions {
    display: flex;
    align-items: center;
    gap: 15px; /* "Welcome" aur "Logout" ke darmiyan fasla */
}

.welcome-message {
    white-space: nowrap; /* Naam ko ek line mein rakhein */
}

/* ===== LOGOUT BUTTON KO KINARE PAR KARNE KA CODE ===== */

/* Header ke container ko flexbox banayein */
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Nav menu ko beech ki saari jagah de dein */
header nav {
    flex-grow: 1;
}

/* Nav menu ke andar list ko flexbox banayein */
header nav ul {
    display: flex;
    justify-content: flex-end; /* Saari cheezon ko right side par bhej dein */
    align-items: center;
}


.resources-link {
    color: #2ecc71 !important;
    font-weight: bold;
}
/* ===== WELCOME & LOGOUT BUTTON KI FINAL STYLING ===== */

/* Header ke container ko flexbox banayein */
header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Nav menu ko beech ki khali jagah de dein */
header nav {
    flex-grow: 1;
}

/* Nav menu ki list ko flexbox banayein */
header nav ul {
    display: flex;
    justify-content: flex-end; /* Saari cheezon ko right side par bhej dein */
    align-items: center;
    width: 100%;
}

/* Menu items par nowrap lagayein takay woh na tootein */
header nav li {
    white-space: nowrap;
}

/* Welcome message ki styling */
.user-welcome {
    color: #bdc3c7; /* Halka sa gray color */
    margin-left: 25px;
    font-size: 0.9em;
}

/* Logout button ko design karein */
.logout-link {
    background: #c0392b; /* Lal rang */
    color: #fff !important; /* Text ka rang safaid rakhein */
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s;
    margin-left: 15px; /* Welcome message se fasla */
    font-weight: bold;
}
.logout-link:hover {
    background: #e74c3c;
}