@import "base/variables.css";
@import "base/typography.css";
@import "utilities/colors.css";
@import "components/buttons.css";
@import "utilities/backgrounds.css";
@import "base/nav.css";
@import "components/stat-item.css";
@import "components/cards.css";
@import "components/badges.css";
@import "components/ai-solution-cards.css";
@import "components/connection-line.css";
@import "components/service-cards.css";
@import "components/development-insights.css";
@import "components/main-banner.css";
@import "components/footer.css";
@import "components/key-values.css";
@import "components/contact-us.css";
@import "components/sustainability.css";

/* 1. Make the main wrapper use the full width of the screen */
.body,
.main {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    background: var(--bg-dark-main)  !important;
}

/* 2. Expand the standard Bootstrap container width */
@media (min-width: 1000px) {
    .container {
        max-width: 80% !important;
        /* Increases width from default ~1140px to 95% of screen */
        padding-left: 40px !important;
        padding-right: 40px !important;
    }
}

/* 3. Specifically for your Hero and Product sections */
section.section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 4. Ensure rows don't create horizontal scrollbars */
.row {
    margin-left: -15px;
    margin-right: -15px;
}