@import url("node_modules/bpg-nino-mtavruli/css/bpg-nino-mtavruli.min.css");

:root {
    --layout-page-gutter: 150px;
    --layout-header-gutter: 40px;
    --layout-section-gutter: 48px;
    --layout-max-width: 1800px;
    --layout-mobile-nav-width: min(360px, 82vw);
}

.container {
    width: min(calc(100% - (var(--layout-page-gutter) * 2)), var(--layout-max-width));
    margin-inline: auto;
}

html,
body,
button,
input,
textarea,
select {
    font-family: "BPG Nino Mtavruli", sans-serif;
}

.header-line {
    padding-top: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-inline: var(--layout-header-gutter);
}

.header-logo {
    max-width: 300px;
    width: 100%;
}

.header-logo .img {
    width: 100%;
    height: auto;
    display: block;
}

.nav {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 28px;
    padding-top: 28px;
    min-height: 110px;
}

.nav-item {
    margin-right: 0;
    font-size: 25px;
}

.header-dowm {
    padding-inline: var(--layout-section-gutter);
}

.footer-div,
.benefits {
    padding-inline: var(--layout-section-gutter);
}

.mobile-nav {
    width: var(--layout-mobile-nav-width);
}

@media (max-width: 1720px) {
    :root {
        --layout-page-gutter: 40px;
        --layout-header-gutter: 24px;
        --layout-section-gutter: 32px;
    }
}

@media (max-width: 1024px) {
    :root {
        --layout-page-gutter: 32px;
        --layout-header-gutter: 0px;
        --layout-section-gutter: 20px;
        --layout-mobile-nav-width: min(340px, 82vw);
    }

    .nav {
        display: none;
    }

    .burger-menu {
        display: flex;
    }
}

@media (max-width: 768px) {
    :root {
        --layout-page-gutter: 20px;
        --layout-section-gutter: 16px;
        --layout-mobile-nav-width: min(320px, 86vw);
    }

    .header-logo {
        max-width: 250px;
    }
}

@media (max-width: 576px) {
    :root {
        --layout-page-gutter: 15px;
        --layout-section-gutter: 12px;
        --layout-mobile-nav-width: min(300px, 90vw);
    }

    .header-logo {
        max-width: 220px;
    }
}