/* Responsive Design */
        @media (max-width: 992px) {            
            .steps {
                flex-direction: column;
                gap: 40px;
            }
            
            .steps::before {
                display: none;
            }
            
            .step {
                width: 100%;
            }
            .comments-section {
                flex-direction: column;
            }
            .comment-content-container, .comments-section .video{
                max-width: 100%;
            }
        }

@media (max-width: 768px) {
    .achievement {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
    
    .stat-card {
        padding: 20px 15px;
    }
    
    .stat-number {
        font-size: 2rem;
    }
    
    .stat-text {
        font-size: 1rem;
    }
    
    .stat-icon {
        width: 50px;
        height: 50px;
        font-size: 1.3rem;
    }
        .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .footer-bottom {
        flex-direction: column;
    }

    .project-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.8rem;
    }
    #projects {
        padding: 4rem 5%;
    }
    #aboutMe .about{
        flex-direction: column;
    }
    .about .profile,
    .about .content,
    #aboutMe .about .profile,
    #aboutMe .about,
    .other-service .profile,
    .other-service .content{
        width: 100%;
        max-width: 100%;
    }
    .hero-bg{
        background-size: cover;
    }
    .hero-tagline{
    font-weight: 800;
    }
    .edu-header,
    .edu-content,
    .project-content,
    #blog .featured-content,
    #blog .blog-content,
    #blog .sidebar-card,
    .contact-info,
    .contact-form-wrapper{
        padding: 15px;
    }
    #about .contact-info{
        gap: 10px;
    }
    #blog .blog-grid {
        grid-template-columns: 1fr;
    }
    
    #blog .featured-image {
        height: 300px;
    }


    .contact-container {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .info-item {
        margin-bottom: 20px;
    }
    .other-service{
        flex-direction: column;
        gap: 0;
    }
}

@media (max-width: 480px) {
    .achievement {
        grid-template-columns: 1fr;
    }
        .footer-grid {
        grid-template-columns: 1fr;
    }

    .filter-controls {
        gap: 0.6rem;
        justify-content: space-between;
    }
    .filter-btn {
        padding: 0.5rem 1.2rem;
        font-size: 0.85rem;
    }
}