/* ================= RESPONSIVE STYLES ================= */

/* Tablet (Laptop & iPads) */
@media (max-width: 1024px) {
    .category-grid, .tools-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .why-grid, .stats-grid, .footer-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    .hero h1 {
        font-size: 2.5rem;
    }
}

/* Mobile Phones */
@media (max-width: 768px) {
    .nav-links, .nav-btns {
        display: none; /* Mobile Menu Logic JS se handle hogi */
    }

    .mobile-menu {
        display: block;
        color: var(--text-color);
    }

    .hero {
        padding: 60px 0;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .search-box {
        flex-direction: column;
        border-radius: 15px;
        padding: 10px;
        gap: 10px;
    }

    .search-box i {
        display: none;
    }

    .search-box input {
        text-align: center;
    }

    .search-box button {
        width: 100%;
        border-radius: 10px;
    }

    .hero-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .category-grid, .tools-grid, .why-grid, .stats-grid, .footer-grid {
        grid-template-columns: 1fr;
    }

    .section-title h2 {
        font-size: 1.6rem;
    }

    .stats-grid div {
        padding: 15px 0;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }

    .stats-grid div:last-child {
        border-bottom: none;
    }
}