/* ===== RESPONSIVE.CSS ===== */

@media (max-width: 1024px) {
    .navbar { padding: 12px 40px; }
    .hero-profile { gap: 50px; padding: 35px; }
    .blog-container, .projects-section, .services-section, .contact-section { padding: 30px 20px; }
}

@media (max-width: 768px) {
    /* Card layouts */
    .cert-card, .workshop-card, .service-card, .project-card, .blog-card {
        flex-direction: column;
        text-align: center;
    }
    .courses-grid, .services-grid, .projects-grid, .blog-grid { grid-template-columns: 1fr; }
    .stats-container { gap: 12px; flex-wrap: wrap; justify-content: center; }
    .stat-item { padding: 8px 12px; min-width: 80px; }
    .stat-number { font-size: 1.3rem; }
    .stat-label { font-size: 0.7rem; }
    .section-header h2 { font-size: 1.4rem; }
    .hero-profile { flex-direction: column; text-align: center; padding: 25px; }
    .hero-left { margin: 0 auto; }
    .hero-right { text-align: center; align-items: center; }

    /* Blog */
    .blog-container { margin: 60px auto; padding: 0 20px; }
    .blog-header h1 { font-size: 2.5rem; }
    .blog-grid { grid-template-columns: 1fr; gap: 20px; }
    .category-filters { justify-content: center; }
    .filter-btn { padding: 6px 16px; font-size: 0.85rem; }

    /* Services */
    .page-hero { padding: 60px 20px 40px; }
    .page-hero-content .main-name { font-size: 2.5rem; }
    .service-card { padding: 25px 20px; }
    .service-icon { width: 60px; height: 60px; }
    .service-icon i { font-size: 1.8rem; }
    .service-card h3 { font-size: 1.3rem; }
    .other-services-box { padding: 30px 20px; }
    .other-services-box h2 { font-size: 2rem; }
    .other-services-grid { grid-template-columns: 1fr; }
    .cta-content h2 { font-size: 2rem; }
    .cta-button, .other-services-btn { padding: 12px 30px; font-size: 1rem; }

    /* Projects */
    .projects-hero { padding: 80px 20px 40px; }
    .projects-hero-content .main-name { font-size: 2.5rem; }
    .project-image { height: 180px; }

    /* Contact */
    .contact-hero { padding: 60px 20px 30px; }
    .contact-hero-content .main-name { font-size: 2.2rem; }
    .contact-container { padding: 20px; }
    .contact-info { display: grid; grid-template-columns: 1fr; gap: 16px; }
    .contact-form-wrapper { padding: 20px; }
    .profile-image-wrapper { width: 80px; height: 80px; }

    /* Footer */
    .footer-content { flex-direction: column; text-align: center; gap: 12px; }
    .footer-right { justify-content: center; }
    .footer-left { flex-direction: column; gap: 8px; }
}

@media (max-width: 480px) {
    .main-name { font-size: 1.8rem; }
    .role { font-size: 0.9rem; }
    .summary { font-size: 0.9rem; padding-left: 12px; }
    .blog-header h1 { font-size: 2rem; }
    .blog-card { padding: 20px; }
    .blog-card h2 { font-size: 1.3rem; }
    .service-card h3 { font-size: 1.2rem; }
    .service-list li { font-size: 0.85rem; }
    .other-services-box h2 { font-size: 1.6rem; }
    .project-content h3 { font-size: 1.2rem; }
    .project-links { flex-direction: column; gap: 8px; }
    .info-card { padding: 16px; }
    .info-icon { width: 40px; height: 40px; }
    .info-icon i { font-size: 1.1rem; }
    .info-card h3 { font-size: 0.9rem; }
    .info-card p { font-size: 0.75rem; }
    .form-group input, .form-group textarea { padding: 10px 14px; font-size: 0.85rem; }
    .submit-btn { padding: 10px 16px; font-size: 0.85rem; }
    .footer-logo-mini { font-size: 1rem; }
    .footer-copyright { font-size: 0.75rem; }
    .footer-link { font-size: 0.75rem; }
    .cert-logo { width: 60px !important; height: 60px !important; }
    .back-to-top { width: 38px !important; height: 38px !important; font-size: 0.9rem !important; bottom: 20px !important; right: 20px !important; }
}

@media (max-width: 360px) {
    .navbar a { font-size: 0.75rem; padding: 4px 6px; }
    .main-name { font-size: 1.6rem; }
    .hero-left { width: 180px; height: 180px; }
    .hero-left img { width: 160px; height: 160px; }
    .filter-btn { padding: 4px 12px; font-size: 0.75rem; }
    .blog-card h2 { font-size: 1.1rem; }
    .project-card h3 { font-size: 1rem; }
    .service-card h3 { font-size: 1rem; }
}