/**
 * Full Width Sections CSS
 * Makes all sections full-width on desktop while maintaining content padding
 */

/* Remove max-width and side gaps from all sections on desktop */
@media (min-width: 992px) {
    /* Main sections - full width, no side gaps */
    .about-section-professional,
    .services-section-professional,
    .news-section-professional,
    .whyus-section-professional,
    .clients-section-professional,
    .action-section,
    .offer-section,
    .blog-section,
    section {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Container inside sections - full width with padding for content */
    .about-section-professional > .container,
    .about-section-professional > .container-fluid,
    .services-section-professional > .container,
    .services-section-professional > .container-fluid,
    .news-section-professional > .container,
    .news-section-professional > .container-fluid,
    .whyus-section-professional > .container,
    .whyus-section-professional > .container-fluid,
    .clients-section-professional > .container,
    .clients-section-professional > .container-fluid,
    .action-section > .container,
    .action-section > .container-fluid,
    .offer-section > .container,
    .offer-section > .container-fluid,
    .blog-section > .container,
    .blog-section > .container-fluid,
    section > .container,
    section > .container-fluid,
    section > .auto-container,
    section > .large-container,
    section > .small-container {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 40px !important;
        padding-right: 40px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Remove padding from nested containers */
    .container .container,
    .container .auto-container,
    .auto-container .container,
    .auto-container .auto-container,
    .container-fluid .container,
    .container-fluid .container-fluid {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    /* Ensure body and page-wrapper don't add side gaps */
    body,
    .page-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }
}

/* For very large screens, add more padding */
@media (min-width: 1400px) {
    section > .container,
    section > .container-fluid,
    section > .auto-container,
    section > .large-container {
        padding-left: 60px !important;
        padding-right: 60px !important;
    }
}

/* For extra large screens */
@media (min-width: 1600px) {
    section > .container,
    section > .container-fluid,
    section > .auto-container,
    section > .large-container {
        padding-left: 80px !important;
        padding-right: 80px !important;
    }
}

/* Keep mobile responsive */
@media (max-width: 991px) {
    section > .container,
    section > .container-fluid,
    section > .auto-container {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}

@media (max-width: 768px) {
    section > .container,
    section > .container-fluid,
    section > .auto-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
}