/* Mobile Spacing Fixes */

/* Fix section padding on mobile */
@media screen and (max-width: 768px) {
    .section-padding {
        padding: 40px 0 !important;
    }
    
    .section-header {
        margin-bottom: 30px !important;
    }
    
    .section-header h2 {
        margin-bottom: 10px !important;
    }
    
    .about-content {
        gap: 30px !important;
    }
    
    /* Fix spacing in portfolio section */
    .portfolio-filter {
        margin-bottom: 20px !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
    }
    
    .portfolio-filter button {
        margin-bottom: 10px !important;
    }
    
    /* Fix spacing in blog section */
    .blog-grid {
        gap: 20px !important;
    }
    
    /* Fix spacing in contact section */
    .contact-content {
        gap: 30px !important;
    }
    
    .contact-info {
        margin-bottom: 20px !important;
    }
    
    /* Fix footer spacing */
    .footer {
        padding: 30px 0 !important;
    }
    
    .footer-content {
        flex-direction: column !important;
        gap: 20px !important;
        text-align: center !important;
    }
    
    /* Fix navigation spacing */
    .nav-menu {
        padding-top: 60px !important;
    }
    
    .nav-menu li {
        margin: 10px 0 !important;
    }
}

/* Fix extra small device spacing */
@media screen and (max-width: 576px) {
    .section-padding {
        padding: 30px 0 !important;
    }
    
    .container {
        padding: 0 15px !important;
    }
    
    /* Reduce margins between elements */
    h1, h2, h3, p {
        margin-bottom: 15px !important;
    }
    
    /* Adjust button spacing */
    .btn {
        padding: 8px 20px !important;
        font-size: 14px !important;
    }
}