@import '_reset.css';
@import 'variables.css';
@import 'UI/ui-button.css';
@import 'UI/ui-card.css';
@import 'blocks/header.css';
@import 'blocks/main-section.css';
@import 'blocks/problem.css';
@import 'blocks/features.css';
@import 'blocks/steps.css';
@import 'blocks/footer.css';
@import 'blocks/compare.css';
@import 'blocks/price.css';
@import 'blocks/about-resourses.css';
@import 'blocks/form.css';
@import 'blocks/client-result.css';
@import 'blocks/documentation.css';

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    font-family: Montserrat, sans-serif;
    background: var(--main-bg);
    color: var(--primary-color);
}

.max-container {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
}

.container {
    padding-left: 56px;
    padding-right: 56px;

    @media screen and (max-width: 1440px) {
        padding-left: 100px;
        padding-right: 100px;
    }

    @media screen and (max-width: 992px) {
        padding-left: 60px;
        padding-right: 60px;
    }

    @media screen and (max-width: 769px) {
        padding-left: 32px;
        padding-right: 32px;
    }

    @media screen and (max-width: 480px) {
        padding-left: 16px;
        padding-right: 16px;
    }
}

.accent {
    color: var(--accent-color);
}