/* Full Width Sections - Make all containers use 100% width */
/* Only affects main page sections */

/* Override all container max-widths */
.container,
.container-wide,
.container-content {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
}

/* Hero section - full width */
.hero {
    width: 100% !important;
}

.hero .container {
    max-width: 100% !important;
}

/* Platform section - full width */
#platform-intro .container {
    max-width: 100% !important;
}

/* Pricing section - full width */
#pricing .container {
    max-width: 100% !important;
}

/* Gufi Difference section - full width */
.gufi-difference .container {
    max-width: 100% !important;
}

/* Gufi Way section - full width */
.comparison-section .container {
    max-width: 100% !important;
}

/* Industries section - full width */
.industries-section .container {
    max-width: 100% !important;
}

.industries-bento {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Marketplace section - full width */
.marketplace-teaser .container {
    max-width: 100% !important;
}

/* Demo section - full width */
.demo-container {
    max-width: 100% !important;
    padding-left: 60px !important;
    padding-right: 60px !important;
}

/* Careers section - full width */
.careers-section .container {
    max-width: 100% !important;
}

/* Responsive - maintain padding on smaller screens */
@media (max-width: 1024px) {
    .container,
    .container-wide,
    .container-content,
    .demo-container {
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

@media (max-width: 768px) {
    .container,
    .container-wide,
    .container-content,
    .demo-container {
        padding-left: 30px !important;
        padding-right: 30px !important;
    }
}