/* Основные стили для body */
body {
    font-family: "Open Sans", sans-serif;  /* Устанавливает шрифт Arial или sans-serif по умолчанию */
    background: linear-gradient(0deg, #c2a886,#917e64,#755b38);
    font-size: 14px;
    margin: 0;  /* Убирает отступы по краям страницы */
    padding: 0;  /* Убирает внутренние отступы */
    background-color: rgba(0, 0, 0, 0.1);  /* Устанавливает светло-серый цвет фона */
    color: #333;  /* Устанавливает темно-серый цвет текста */
    display: grid;  /* Использует CSS Grid Layout для body */
    grid-template-rows: auto 1fr auto;  /* Задает три строки: авто-размер для хедера, 1fr для основного контента, авто-размер для футера */
    min-height: 100vh;  /* Устанавливает минимальную высоту на 100% высоты окна браузера */
}

/* Всегда отображать вертикальную полосу прокрутки */
html {
    overflow-y: scroll;
}

/* Стили для header */
header {
    position: fixed;  /* Фиксирует положение header */
    left: 50%;        /* Центрирование по горизонтали через transform */
    transform: translateX(-50%);  /* Сдвигает вправо на половину ширины самого блока */
    z-index: 100;                /* Устанавливаем высокий индекс Z, чтобы header был над другими элементами */

    background-color: #385275;  /* Устанавливает цвет фона */
    color: white;  /* Устанавливает белый цвет текста */
    padding: 0px 20px;  /* Устанавливает внутренние отступы по вертикали */
    text-align: center;  /* Центрирует текст */
    width: 1200px; /* Ограничивает максимальную ширину до 840 пикселей */
    margin: 0px auto 0px;  /*Устанавливает внешний отступ по вертикали и центрирует по горизонтали margin: 10px auto 0px;  */
    border-radius: 0 0 0 0;  /* Закругляет углы элемента, было: 8px 8px 0 0;*/
}

/* Стили для footer */
footer {
    font-family: "Bitter", serif;
    background-color: #385275;  /* Устанавливает цвет фона */
    color: white;  /* Устанавливает белый цвет текста */
    padding: 10px 20px;  /* Устанавливает внутренние отступы по вертикали */
    text-align: center;  /* Центрирует текст */
    width: 1200px;  /* Ограничивает максимальную ширину до 840 пикселей */
    margin: 0px auto 10px;  /* Устанавливает внешний отступ по вертикали и центрирует по горизонтали */
    border-radius: 0px 0px 8px 8px;  /* Закругляет углы элемента */
}


nav ul {
    display: flex;
    justify-content: left;
    list-style: none;  /* Убирает маркеры списка */
    padding: 0;  /* Убирает внутренние отступы */
}

/* Стили для пунктов меню */
nav ul li {
    display: inline;  /* Располагает пункты меню в одну строку */
    margin: 0 10px;  /* Устанавливает отступы между пунктами меню было: margin: 0 10px;*/
    position: relative;  /* Устанавливает относительное позиционирование для псевдоэлемента */
}

/* Добавляем стили для вертикальных разделителей */
nav ul li::after {
    /*content: '|';  /* Контент разделителя */*/
    position: absolute;  /* Абсолютное позиционирование для точного размещения */
    right: -15px;  /* Размещение справа с небольшим отступом */
    top: 43%;  /* Вертикальное центрирование */
    transform: translateY(-50%);  /* Центрирование по вертикали */
    color: white;  /* Цвет разделителя */
}

/* Убираем разделитель у последнего элемента */
nav ul li:last-child::after {
    content: '';  /* Пустое содержимое для последнего элемента */
}

/* Стили для ссылок в меню */
ul li a {
    font-family: "Bitter", serif;
    display: flex; /* Элемент отображается как блочный, чтобы захватывать всю ширину родителя */
    padding: 3px 3px; /* Внутренние отступы: 15px сверху и снизу, 20px справа и слева было: padding: 5px 5px; */
    color: white; /* Цвет текста - белый */
    text-decoration: none; /* Убирает подчеркивание текста ссылки */
    position: relative; /* Устанавливает относительное позиционирование для дальнейшего использования с псевдоэлементами или дочерними элементами */
}

/* Стиль для активного пункта меню */
.active {
  background: linear-gradient(0deg, #c2a886,#917e64,#755b38);; /* Градиент от светлого к чуть более насыщенному коричневому */
  color: white;             /* Темный текст для контраста */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Легкая тень для объема */
  border-radius: 4px;      /* Немного скругленные углы */
  transition: all 0.3s ease; /* Плавный переход всех свойств */
}

/* Стили для иконки */
ul li a .material-icons {
    margin-right: 5px; /* Отступ справа от иконки */
    margin-top: -1px;
    font-size: 20px; /* Размер иконки */
}

/* Стили для эффекта подчеркивания при наведении */
nav ul li a::after {
    content: ''; /* пустое содержимое */
    position: absolute; /* абсолютное позиционирование */
    left: 50%; /* центрирование по горизонтали */
    bottom: -5px; /* привязка к нижнему краю */
    width: 0; /* начальная ширина */
    height: 3px; /* толщина подчеркивания */
    background: #fff; /* цвет подчеркивания */
    transition: width 0.5s, left 0.5s; /* анимация подчеркивания */
}

/* Эффект при наведении */
nav ul li a:hover::after {
    width: 100%; /* полная ширина */
    left: 0; /* смещение влево */
}

/* Стили для основного контента */
main {
    width: 1200px;  /* Ограничивает максимальную ширину до 800 пикселей */
    margin: 0px auto;  /* Устанавливает внешний отступ по вертикали и центрирует по горизонтали */
    padding: 20px;  /* Устанавливает внутренние отступы */
    background: white;  /* Устанавливает белый цвет фона */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  /* Добавляет тень вокруг элемента */
    position: relative;
}

/* Обертка для основного контента */
.wrapper {
    display: contents; /*Указывает, что .wrapper не создаёт новый контейнер, а используется для распределения потомков */

/* Стили для профиля */
.profile {
    display: flex;  /* Использует flexbox для расположения элементов */
    align-items: flex-start;  /* Выравнивает элементы по началу */
    margin-bottom: 20px;  /* Устанавливает нижний внешний отступ */
}

/* Стили для фото профиля */
.profile-photo {
    width: 170px;  /* Устанавливает ширину изображения */
    height: 170px;  /* Устанавливает высоту изображения */
    object-fit: cover;  /* Обрезает изображение, чтобы оно полностью заполнило блок */
    border-radius: 50%;  /* Закругляет углы до формы круга */
    margin-right: 20px;  /* Устанавливает правый внешний отступ */
}

/* Стили для информации профиля */
.profile-info {
    display: flex;  /* Использует flexbox для расположения элементов */
    flex-direction: column;  /* Располагает элементы в колонку */
}

/* Стили для заголовков в информации профиля */
.profile-info h1 {
    margin: 0;  /* Убирает отступы */
}

/* Стили для параграфов в информации профиля */
.profile-info p {
    margin-top: 10px;  /* Устанавливает верхний отступ */
    margin-bottom: 10px;  /* Устанавливает нижний отступ */
}

/* Стили для контактной информации */
.contact-info {
    display: flex;  /* Использует flexbox для расположения элементов */
    align-items: center;  /* Выравнивает элементы по центру */
    margin-top: 10px;  /* Устанавливает верхний внешний отступ */
    line-height: 1px;  /*Межстрочный интервал*/
}

/* Стили для иконок в контактной информации */
.contact-info .icon {
    width: 20px;  /* Устанавливает ширину иконки */
    height: 20px;  /* Устанавливает высоту иконки */
    margin-right: 10px;  /* Устанавливает правый внешний отступ */
}

/* Стили для навыков */
.skills {
    display: flex;  /* Использует flexbox для расположения элементов */
    flex-wrap: wrap;  /* Разрешает перенос строк */
    gap: 10px;  /* Устанавливает расстояние между элементами */
    margin-top: 10px;  /* Устанавливает верхний внешний отступ */
}

/* Стили для каждого навыка */
.skill {
    background-color: rgba(0, 0, 0, 0.1);  /* Устанавливает светло-серый цвет фона */
    padding: 10px;  /* Устанавливает внутренние отступы */
    border-radius: 5px;  /* Закругляет углы элемента */
    font-size: 14px;  /* Устанавливает размер шрифта */
    text-align: center;  /* Центрирует текст */
}

/* Стили для заголовков h1, h2, h3 */
h1, h2, h3 {
    font-family: "Bitter", serif;
    border-bottom: 2px solid #333;  /* Добавляет нижнюю границу */
    padding-bottom: 10px;  /* Устанавливает нижний внутренний отступ */
}

/* Общие стили для параграфов */
p {
    font-size: 14px;  /* Устанавливает размер шрифта */
}

/* Стили для портфолио */
#portfolio {
    display: flex;  /* Использует flexbox для расположения элементов */
    flex-direction: column;  /* Располагает элементы в колонку */
    gap: 20px;  /* Устанавливает расстояние между элементами */
}

/* Стили для каждого элемента портфолио */
.portfolio-item {
    display: flex;  /* Использует flexbox для расположения элементов */
    align-items: center;  /* Выравнивает элементы по центру */
    gap: 20px;  /* Устанавливает расстояние между элементами */
}

/* Стили для изображений портфолио */
.portfolio-item img {
    max-width: 100%;  /* Устанавливает максимальную ширину изображения */
    border-radius: 8px;  /* Закругляет углы изображения */
}

/* Стили для изображений в портфолио */
.portfolio-image {
    width: 200px;  /* Устанавливает ширину изображения */
    height: auto;  /* Устанавливает автоматическую высоту */
    cursor: pointer;  /* Меняет курсор на указатель */
    transition: transform 0.3s ease;  /* Добавляет плавный переход для трансформаций */
}

/* Стили для эффекта наведения на изображения в портфолио */
.portfolio-image:hover {
    transform: scale(1.1);  /* Увеличивает изображение при наведении */
}

/* Стили для деталей портфолио */
.portfolio-details {
    flex-grow: 1;  /* Заставляет элемент занимать оставшееся пространство */
}

/* Стили для заголовков деталей портфолио */
.portfolio-details h2 {
    margin-top: 0;  /* Убирает верхний отступ */
}

/* Стили для оверлея */
#overlay {
    position: fixed;  /* Фиксирует элемент на экране */
    display: none;  /* Скрывает элемент по умолчанию */
    top: 0;  /* Устанавливает позицию элемента сверху */
    left: 0;  /* Устанавливает позицию элемента слева */
    width: 100%;  /* Устанавливает ширину на 100% */
    height: 100%;  /* Устанавливает высоту на 100% */
    background: rgba(0, 0, 0, 0.8);  /* Устанавливает полупрозрачный черный фон */
    z-index: 1000;  /* Устанавливает высокий приоритет отображения */
    justify-content: center;  /* Центрирует содержимое по горизонтали */
    align-items: center;  /* Центрирует содержимое по вертикали */
}

/* Стили для изображения в оверлее */
#overlay img {
    max-width: 90%;  /* Устанавливает максимальную ширину 90% от экрана */
    max-height: 90%;  /* Устанавливает максимальную высоту 90% от экрана */
    border-radius: 8px;  /* Закругляет углы изображения */
}

/* Стили для кнопки закрытия оверлея */
#close-btn {
    position: absolute;  /* Абсолютное позиционирование элемента */
    top: 20px;  /* Отступ сверху */
    right: 40px;  /* Отступ справа */
    font-size: 40px;  /* Размер шрифта */
    color: white;  /* Цвет текста */
    cursor: pointer;  /* Меняет курсор на указатель */
}

/* Стили для страницы готовых моделей */
#models {
    display: flex; /* Использует flexbox для расположения элементов */
    flex-direction: column; /* Располагает элементы в колонку */
    gap: 20px; /* Устанавливает расстояние между элементами */
}

.model-item {
    display: flex; /* Использует flexbox для расположения элементов */
    align-items: center; /* Выравнивает элементы по центру */
    gap: 20px; /* Устанавливает расстояние между элементами */
}

.model-image {
    width: 200px;  /* Устанавливает ширину изображения */
    height: auto; /* Устанавливает автоматическую высоту */
    border-radius: 8px; /* Закругляет углы изображения */
    cursor: pointer;  /* Меняет курсор на указатель */
    transition: transform 0.3s ease;  /* Добавляет плавный переход для трансформаций */
}

/* Стили для эффекта наведения на изображения в портфолио */
.model-image:hover {
    transform: scale(1.1);  /* Увеличивает изображение при наведении */
}

/* Стили для деталей портфолио */
.model-details {
    flex-grow: 1;  /* Заставляет элемент занимать оставшееся пространство */
}

/* Стили для заголовков деталей портфолио */
.model-details h2 {
    margin-top: 0;  /* Убирает верхний отступ */
}

.download-btn {
    display: inline-block;
    padding: 10px 20px;
    margin-top: 10px;
    background-color: #385275;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.download-btn:hover {
    background-color: #2c3e50;
}

.company-info {
    margin-bottom: 10px;
    line-height: 3px;
}

.section-title {
    font-weight: bold;
    margin-top: 20px;
    font-size: 18px;
}

/* Стили для основного списка */
.multi-level {
  list-style-type: none; /* Убираем стандартные маркеры */
  padding-left: 0; /* Убираем отступ */
}

.multi-level > li {
  counter-increment: section; /* Увеличиваем счетчик для первого уровня */
}

.multi-level > li::before {
  content: counter(section) ". "; /* Выводим счетчик перед элементом */
}

/* Стили для вложенных списков */
.multi-level ol {
  list-style-type: none; /* Убираем маркеры для вложенных списков */
  padding-left: 20px; /* Отступ для вложенных списков */
}

.multi-level ol > li {
  counter-increment: subsection; /* Увеличиваем счетчик для второго уровня */
}

.multi-level ol > li::before {
  content: counter(section) "." counter(subsection) ". "; /* Форматируем нумерацию */
}

/* Стили для еще более вложенных списков */
.multi-level ol ol {
  padding-left: 20px;
}

.multi-level ol ol > li {
  counter-increment: subsubsection; /* Увеличиваем счетчик для третьего уровня */
}

.multi-level ol ol > li::before {
  content: counter(section) "." counter(subsection) "." counter(subsubsection) ". "; /* Форматируем нумерацию */
}

.images-container {
    /*display: flex;*/
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    max-width: 100%;
    margin: auto;
}

.images-container img {
    width: calc(48% - 5px); /* Ширина каждой картинки составляет половину контейнера минус половина отступа */
    height: auto;
    border: 1px solid #333; /* Рамочка толщиной 2 пикселя черного цвета */
    border-radius: 10px; /* Закругление углов */
}

.buttons {
    text-align: center;
    position: absolute;
    top: 150px;
    right: 50px;
}

.button {
    background: #385275;
    color: white;
    padding: 12px 24px;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    display: block;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 1px;
}

.button:hover {
    background: #b59d7d;
    color: white;
}