/* styles\main.css */
/* Подключение CSS переменных */
@import url('variables.css');
@import url('hero.css');
@import url('footer.css');


/* Глобальный контейнер */
.container {
    max-width: 1440px;  /* Максимум по вашему дизайну */
    width: 100%;        /* На меньших экранах занимает всю ширину */
    margin: 0 auto;     /* Центрирует на больших экранах */
    padding: 0 20px;    /* Отступы по бокам, как в вашем коде (можно регулировать) */
    box-sizing: border-box;  /* Чтобы padding не добавлял ширину */
}


/* Reset и базовые стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    opacity: 1;
    transform:none; !important
    transition: none; !important
}

body {
    font-family: var(--font-family-primary);
    line-height: 1.6;
    color: var(--color-text);
    overflow-y: auto; /* Возвращаем вертикальную прокрутку */
}

/* Убираем скроллбар для всех элементов */
html, body {
    overflow-x: hidden; /* Clip any potential page overflow */
    overflow-y: auto; /* Возвращаем вертикальную прокрутку */
    scrollbar-width: none; /* Firefox - скроллбар невидимый */
    -ms-overflow-style: none; /* IE и Edge - скроллбар невидимый */
}

/* Убираем скроллбар для WebKit браузеров (Chrome, Safari) */
html::-webkit-scrollbar,
body::-webkit-scrollbar {
    display: none;
}

/* Header, nav и hero стили не используются в текущем дизайне */
/* Footer стили перенесены в footer.css */
/* Медиа-запросы не нужны - используются vw единицы в hero.css */


@media (max-width: 1439px) {
    /* Глобальный контейнер */
    .container {
    max-width: 1280px;  /* Максимум по вашему дизайну */
    width: 100%;        /* На меньших экранах занимает всю ширину */
    margin: 0 auto;     /* Центрирует на больших экранах */
    padding: 0 20px;    /* Отступы по бокам, как в вашем коде (можно регулировать) */
    box-sizing: border-box;  /* Чтобы padding не добавлял ширину */
    }
}
@media (max-width: 1279px) {
    /* Глобальный контейнер */
    .container {
    max-width: 960px;  /* Максимум по вашему дизайну */
    width: 100%;        /* На меньших экранах занимает всю ширину */
    margin: 0 auto;     /* Центрирует на больших экранах */
    padding: 0 20px;    /* Отступы по бокам, как в вашем коде (можно регулировать) */
    box-sizing: border-box;  /* Чтобы padding не добавлял ширину */
    }

    }
@media (max-width: 959px) {
    /* Глобальный контейнер */
    .container {
    max-width: 640px;  /* Максимум по вашему дизайну */
    width: 100%;        /* На меньших экранах занимает всю ширину */
    margin: 0 auto;     /* Центрирует на больших экранах */
    padding: 0 20px;    /* Отступы по бокам, как в вашем коде (можно регулировать) */
    box-sizing: border-box;  /* Чтобы padding не добавлял ширину */
    }
    }
@media (max-width: 639px) {
    /* Глобальный контейнер */
    .container {
    max-width: 375px;  /* Максимум по вашему дизайну */
    width: 100%;        /* На меньших экранах занимает всю ширину */
    margin: 0 auto;     /* Центрирует на больших экранах */
    padding: 0 16px;    /* Отступы по бокам, как в вашем коде (можно регулировать) */
    box-sizing: border-box;  /* Чтобы padding не добавлял ширину */
    }
    }
@media (max-width: 375px) {
    /* Глобальный контейнер */
    .container {
    max-width: 375px;  /* Максимум по вашему дизайну */
    width: 100%;        /* На меньших экранах занимает всю ширину */
    margin: 0 auto;     /* Центрирует на больших экранах */
    padding: 0 13px;    /* Отступы по бокам, как в вашем коде (можно регулировать) */
    box-sizing: border-box;  /* Чтобы padding не добавлял ширину */
    }
    }