/* Задание 3. Стандартный сброс стилей (рисунок на стр. 7). */
*,
*::before,
*::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* Задание 4. Шрифт и пример фонового цвета (стр. 9). */
:root {
    --main-font-family: 'Inter', sans-serif;
    --background-color: #FFF5F0;
    /* Значения остальных цветов взять из макета Figma. */
}

/* Задание 3. Контейнер шириной 1240 px (стр. 7). */
.container {
    position: relative;
    max-width: 1240px;
    margin: 0 auto;
}

/* Задания 3 и 4. Прижатие подвала к низу и применение шрифта. */
body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    font-family: var(--main-font-family);
    background-color: var(--background-color);
}

main {
    flex-grow: 1;
    /* После фиксации шапки: margin-top по высоте шапки из Figma (стр. 20). */
}

/* Задание 5. Шапка и меню. */
.header {
        box-shadow: 0px 2px 20px 0px rgba(69, 29, 0, 0.15);

    /* Задание 8: фиксированная шапка (стр. 20). */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    background-color: var(--background-color);
}

.header__container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 117px;
}

.header__mainmenu ul {
    display: flex;
    flex-direction: row;
    align-items: center;
    list-style: none;
    gap: 44px; 
}

.header__title {
    /* Параметры шрифта и цвет взять из Figma. */
}

.mainmenu__link {
    text-decoration: none;
    /* Цвет основного текста задать через переменную из Figma. */
}

.mainmenu__link:hover,
.mainmenu__link:active,
.mainmenu__link:focus {
    /* Цвет ссылки при взаимодействии — оранжевый из Figma. */
}

/* Задание 6. Каталог. */
.catalog__container {
    display: flex;
    flex-direction: row;
    /* gap: значение взять из Figma. */
}

.catalog__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Ширину, фон и padding взять из Figma. */
}

.card__img {
    width: 100%;
    object-fit: cover;
    /* Высоту картинки в пикселях взять из Figma. */
}

.card__title {
    flex-grow: 1;
}

/* Задание 8. Кнопка «+» (стр. 18). */
.card__btn-add {
    position: absolute;
    /* top и right, а также остальное оформление взять из Figma. */
}

/* Задание 7. Обратная связь. */
.feedback .container {
    display: flex;
    /* gap: значение взять из Figma. */
}

.feedback__intro,
.feedback__main {
    width: 50%;
}

/* Задание 8. Абсолютное позиционирование SVG-иконок формы. */
.form__item {
    position: relative;
}

.form__item svg {
    position: absolute;
    /* Координаты и оформление взять из Figma. */
}

/* По заданиям 5–8 добавить hover, focus, active для кнопок и элементов формы. */
/* Остальные стили для секций — по графическому макету Figma (самостоятельное задание). */