/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 1024px) {
    h1 { font-size: 2.8rem; }
    .section-title h2 { font-size: 2.2rem; }
    .timeline::before { left: 20px; }
    .timeline-item,
    .timeline-item:nth-child(odd) {
        flex-direction: column;
        text-align: left;
        padding-left: 50px;
    }
    .timeline-dot {
        left: 20px;
        transform: translateX(-50%);
    }
    .timeline-content {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    :root { --nav-height: 65px; }

    /* Navigation */
    .nav-links {
        display: none;
        flex-direction: column;
        position: fixed;
        top: var(--nav-height);
        left: 0;
        right: 0;
        background: linear-gradient(135deg, #4361ee 0%, #3a0ca3 100%);
        padding: 1.5rem;
        gap: 0.5rem;
        z-index: 999;
        box-shadow: 0 8px 24px rgba(0,0,0,0.2);
    }

    .nav-links.active { display: flex; }
    .nav-links li { width: 100%; }
    .nav-links a {
        display: block;
        padding: 0.8rem 1rem;
        border-radius: 10px;
        font-size: 1rem;
    }
    .nav-links a:hover,
    .nav-links a.active {
        background: rgba(255,255,255,0.15);
    }
    .nav-links a::after { display: none; }

    .mobile-menu-btn { display: block; }
    .nav-extras { gap: 0.5rem; }

    /* Hero */
    .hero {
        flex-direction: column;
        text-align: center;
        min-height: auto;
        padding: 3rem 0;
    }
    .hero-content { order: 1; width: 100%; padding: 0; }
    .hero-image { order: 2; width: 100%; margin-top: 2rem; }
    h1 { font-size: 2.2rem; }
    .hero p { font-size: 1rem; }

    /* About */
    .about-hero-content {
        flex-direction: column;
        text-align: center;
    }

    /* Stats bar */
    .stats-bar { gap: 2rem; padding: 2rem 1rem; }
    .stat-number { font-size: 2.4rem; }

    /* Timeline */
    .timeline::before { left: 16px; }
    .timeline-item,
    .timeline-item:nth-child(odd) {
        flex-direction: column;
        text-align: left;
        padding-left: 44px;
    }
    .timeline-dot { left: 16px; top: 10px; }
    .timeline-content { max-width: 100%; }

    /* Grids */
    .experience-grid,
    .expertise-grid,
    .edu-exp-grid,
    .features-grid,
    .articles-grid,
    .coming-soon-grid,
    .contact-options {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Contact form */
    .contact-form { padding: 2rem 1.5rem; }

    /* Back to top */
    .back-to-top { bottom: 1.5rem; right: 1.5rem; width: 42px; height: 42px; }

    /* Section padding */
    .features, .education-experience, .expertise,
    .career-timeline, .portfolio, .coming-soon, .contact {
        padding: 4rem 0;
    }

    .section-title h2 { font-size: 2rem; }
    .section-title { margin-bottom: 2rem; }

    /* CTA sections */
    .cta-section, .about-cta {
        padding: 3rem 1.5rem;
        border-radius: 12px;
    }
    .cta-section h2, .about-cta h2 { font-size: 1.8rem; }

    /* Filter tabs */
    .filter-tabs { gap: 0.5rem; }
    .filter-tab { padding: 0.4rem 1rem; font-size: 0.85rem; }

    /* Article image */
    .article-image { height: 160px; }

    /* Footer */
    .footer-text { flex-direction: column; gap: 0.3rem; }
    .social-links { gap: 0.8rem; }
    .social-links a { width: 38px; height: 38px; }
}

@media (max-width: 480px) {
    h1 { font-size: 1.9rem; }
    .hero p { font-size: 0.95rem; }
    .cta-button { padding: 0.85rem 2rem; font-size: 0.95rem; }
    .logo { font-size: 1.4rem; }
    .articles-grid { grid-template-columns: 1fr; }
    .stat-number { font-size: 2rem; }
    .stats-bar { gap: 1.5rem; }
}