/*
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    text-align: center;
}
*/

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    text-align: center;
    /*overflow: hidden; /* Предотвращение появления полос прокрутки */
}

.header {
    display: flex;  /* Превращает контейнер в flex-контейнер */
    flex-direction: column;  /* Выстраивает дочерние элементы в колонку (по вертикали) */
    align-items: center;  /* Центрирует дочерние элементы по горизонтали */
}

.logo-container {
    display: flex;
    flex-direction: row; /* Элементы будут располагаться горизонтально */
    align-items: center; /* Выравнивание по вертикали */
    justify-content: center; /* Выравнивание по горизонтали */
    /* margin: 20px 500px; /* 1. сверху и снизу, 2. слева и справа */
    margin: 20px auto; /* Отступы сверху и снизу 20px, по горизонтали автоматически */
}

.content {
    display: flex;
    flex-direction: column; /* Элементы будут располагаться вертикально */
    align-items: center; /* Выравнивание по вертикали */
    justify-content: center; /* Выравнивание по горизонтали */
    /* margin: 20px 500px; /* 1. сверху и снизу, 2. слева и справа */
    margin: 20px auto; /* Отступы сверху и снизу 20px, по горизонтали автоматически */
    margin-top: 5px; /* Добавляем отступ сверху для изображения */
}

@font-face {
    font-family: 'google PoetsenOne-Regular';
    src: url('/static/fonts/PoetsenOne-Regular.ttf') format('truetype');
    /* Дополнительные свойства шрифта, если необходимо */
}

.header h1 {
    font-size: 24px; /* Размер шрифта */
    flex: 1;
    margin-bottom: 20px; /* Отступ вниз */
    font-family: 'google PoetsenOne-Regular', sans-serif; /* Шрифт текста */
    font-weight: 650; /* 100 – 900 — числовые значения толщины, где 400 — обычный, 700 — жирный, 900 — самый жирный. */
    color: #cf1974;
}

.header h2 {
    font-size: 24px; /* Размер шрифта */
    flex: 1;
    margin-bottom: 20px; /* Отступ вниз */
    font-family: 'google PoetsenOne-Regular', sans-serif; /* Шрифт текста */
    font-weight: 650; /* 100 – 900 — числовые значения толщины, где 400 — обычный, 700 — жирный, 900 — самый жирный. */
    color: #152fd6;
}

.header2 {
    display: flex;  /* Превращает контейнер в flex-контейнер */
    flex-direction: column;  /* Выстраивает дочерние элементы в колонку (по вертикали) */
    align-items: center;  /* Центрирует дочерние элементы по горизонтали */
}

.header2 h3,
.header2 h4,
.header2 h5 {
    font-size: 24px; /* Размер шрифта */
    flex: 1;
    margin-bottom: 20px; /* Отступ вниз */
    font-family: 'google PoetsenOne-Regular', sans-serif; /* Шрифт текста */
    color: #152fd6;
}

/* Заголовок - Contacts | Контакты */
.header2 h6 {
    font-size: 24px; /* Размер шрифта */
    flex: 1;
    margin-bottom: 20px; /* Отступ вниз */
    font-family: 'google PoetsenOne-Regular', sans-serif; /* Шрифт текста */
    color: #152fd6;
}

.logo {
    max-width: 50px; /* Установите нужный размер */
    height: auto;
    border-radius: 8px; /* Опционально, для закругленных углов */
    margin-right: 20px; /* Отступ справа от логотипа */
    transition: transform 0.2s ease-in-out;
}

.logo.clicked {
    transform: scale(0.95); /* Уменьшение размера при нажатии */
    opacity: 0.8; /* Немного прозрачности */
    transition: transform 0.2s, opacity 0.2s; /* Плавный переход */
}

.header-buttons {
    display: flex;
    align-items: center; /* Выравниваем кнопки и ссылку по вертикали */
}

.portfolio-button,
.interaction-basics,
.contact-button,
.telegram-link {
    margin-left: 2px; /* Добавляем отступы между элементами */
    padding: 8px 8px; /* Внутренние отступы */
    border: none; /* Убираем стандартную рамку */
    border-radius: 10px; /* Закругленные углы */
    background-color: #2F4F4F; /* Цвет фона */
    color: white; /* Цвет текста */
    text-decoration: none; /* Убираем подчеркивание для ссылки */
    font-size: 10px; /* Размер текста */
    cursor: pointer; /* Курсор в виде указателя */
    transition: background-color 0.3s ease, transform 0.3s ease; /* Плавные переходы для фона и трансформации */
}

.portfolio-button:hover,
.interaction-basics:hover,
.contact-button:hover,
.telegram-link:hover {
    background-color: #45a049; /* Цвет фона при наведении */
    transform: scale(1.05); /* Увеличение кнопки при наведении */
}

.telegram-link {
    display: inline-block; /* Делаем ссылку блочным элементом */
}

.portfolio-button:focus,
.interaction-basics:focus,
.contact-button:focus,
.telegram-link:focus {
    outline: none; /* Убираем стандартный фокус */
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.6); /* Добавляем тень при фокусе */
}

.p0 {
    font-size: 12px; /* Размер шрифта */
    flex: 1;
    margin-bottom: 15px; /* Отступ вниз */
    font-family: 'google PoetsenOne-Regular', sans-serif; /* Шрифт текста */
    /*color: #7B68EE; /* Умеренный аспидно-синий */
    color: black;
}

.p1 {
    font-size: 18px; /* Размер шрифта */
    flex: 1;
    margin: 0 20px 0 0;
    font-family: 'google PoetsenOne-Regular', sans-serif; /* Шрифт текста */
    /*color: #7B68EE; /* Умеренный аспидно-синий */
    color: black;
}

.header-image {
    max-width: 200px; /* Установите нужный размер */
    height: auto;
    border-radius: 20px; /* Опционально, для закругленных углов */
    margin-left: 20px; /* Добавляем отступ слева для изображения */
    margin-top: 20px; /* Добавляем отступ сверху для изображения */
}

.header-image.clicked {
    transform: scale(0.95); /* Уменьшение размера при нажатии */
    opacity: 0.8;
    transition: transform 0.2s, opacity 0.2s;
}

/* Адаптация для экранов менее 600px (смартфоны) */
@media (max-width: 600px) {
    .header-image {
        max-width: 50%; /* Делаем изображения больше, но не во всю ширину */
    }
}

/* id="portfolio-section" */
/* ----------------------------------------------*/
#portfolio-section {
    padding: 50px 20px;
    /*background-color: #4CAF50; /* Измените цвет фона */
    /*background-color: #464451; /* Измените цвет фона */
    background-color: #2F4F4F;
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#portfolio-section h3 {
    font-size: 24px;
    margin-bottom: 20px;
    color: white;
}

#portfolio-section p {
    font-size: 18px;
    max-width: 1200px;
    margin: 5px auto;
    padding: 20px;
    color: white;
}
/* ----------------------------------------------*/

/* id="cooperation-section" */
/* ----------------------------------------------*/
#cooperation-section {
    padding: 50px 20px;
    background-color: white;
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#cooperation-section p {
    font-size: 18px;
    max-width: 800px;
    margin: 20px auto;
    padding: 20px;
}
/* ----------------------------------------------*/

/* id='interaction-basics' 'game' & "contact-button" */
/* ----------------------------------------------*/
#interaction-basics,
#game,
#contact-button {
    padding: 50px 20px;
    background-color: white; /* Измените цвет фона */
    margin-top: 10px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

#contact-button h3 {
    font-size: 22px;
    color: #803E75; /* Умеренно-темный пурпурный */
}

#contact-button p {
    font-size: 18px;
    color: #333;
}

#interaction-basics p {
    text-align: left; /* Выравнивание параграфов по левому краю */
    font-size: 18px;
    max-width: 800px;
    margin: 5px auto;
    padding: 0; /* Убедитесь, что нет внутренних отступов */
}

#game p {
    text-align: left; /* Выравнивание параграфов по левому краю */
    font-size: 18px;
    max-width: 800px;
    margin: 5px auto;
    padding: 0; /* Убедитесь, что нет внутренних отступов */
}
/* ----------------------------------------------*/

.project-title {
    text-align: left;
    font-weight: bold;
}

.project-description {
    text-align: left;
}

a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
    padding: 5px 10px;
    border-radius: 5px;
}

a:hover {
    color: white;
    background-color: #0056b3;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    text-decoration: none; /* Отключаем подчеркивание при наведении */
}

.contact-container {
    display: flex;
    flex-direction: row; /* Элементы будут располагаться горизонтально */
    align-items: center; /* Выравнивание по вертикали */
    justify-content: center; /* Выравнивание по горизонтали */
    /* margin: 20px 500px; /* 1. сверху и снизу, 2. слева и справа */
    margin: 20px auto; /* Отступы сверху и снизу 20px, по горизонтали автоматически */
}

.contact-info {
    margin-left: 20px; /* добавьте отступ между элементами, если нужно */
}

.gallery {
    display: flex;
    flex-wrap: wrap; /* Позволяет изображениям оборачиваться на следующую строку */
    gap: 10px; /* Расстояние между изображениями */
    justify-content: center; /* Центрируем галерею */
    margin-top: 20px; /* Отступ сверху для визуального разделения */
}

.gallery-item-mail {
    position: relative; /* Необходимо для абсолютного позиционирования описания */
    flex: 1 1 calc(20% - 20px); /* Размеры каждого изображения */ /* Элементы занимают % ширины контейнера минус px */
    max-width: calc(20% - 20px); /* Максимальная ширина каждого изображения */ /* Ограничиваем максимальную ширину */
    overflow: visible; /* Позволяем содержимому выходить за пределы элемента */
}

/* Размеры изображения */
/* ------------------------------------------------------------------ */
/* для десктопов */
@media (min-width: 768px) {
    .gallery-item-telegram {
        position: relative; /* Необходимо для абсолютного позиционирования описания */
        flex: 1 1 calc(20% - 20px); /* Размеры каждого изображения */
        max-width: calc(20% - 20px); /* Максимальная ширина каждого изображения */
        overflow: visible; /* Позволяем содержимому выходить за пределы элемента */
    }
}

/* для смартфонов */
@media (max-width: 767px) {
    .gallery-item-telegram {
        position: relative; /* Необходимо для абсолютного позиционирования описания */
        flex: 1 1 calc(50% - 20px); /* Размеры каждого изображения */
        max-width: calc(50% - 20px); /* Максимальная ширина каждого изображения */
        overflow: visible; /* Позволяем содержимому выходить за пределы элемента */
    }
}
/* ------------------------------------------------------------------ */

.gallery-item-mail img,
.gallery-item-telegram img {
    width: 100%;
    height: auto; /* Масштабируем изображение, сохраняя пропорции */
    border-radius: 2px; /* Закругленные углы для изображений */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Добавляем тень */
    transition: transform 0.3s ease, z-index 0s; /* Плавный переход для трансформации и z-index */
    z-index: 1; /* Устанавливаем начальный z-index */
}

/* увеличение изображения при наведении
.gallery-item img:hover {
    transform: scale(3.0); /* Увеличиваем изображение при наведении */
    /* z-index: 10; /* Поднимаем изображение над остальными */
    /* position: relative; /* Устанавливаем позиционирование для z-index */
/*}*/

/* увеличение изображения при клике */
/* ------------------------------------------------------------------ */
/* для десктопов */
@media (min-width: 768px) {
    .gallery-item-mail.enlarged img{
        transform: scale(1.5); /* Увеличиваем изображение */
        z-index: 10; /* Поднимаем изображение над остальными */
        position: relative; /* Устанавливаем позиционирование для z-index */
    }

    .gallery-item-telegram.enlarged img {
        transform: scale(1.5); /* Увеличиваем изображение */
        z-index: 10; /* Поднимаем изображение над остальными */
        position: relative; /* Устанавливаем позиционирование для z-index */
    }
}

/* для смартфонов */
@media (max-width: 767px) {
    .gallery-item-mail.enlarged img{
        transform: scale(2.0); /* Увеличиваем изображение */
        z-index: 10; /* Поднимаем изображение над остальными */
        position: relative; /* Устанавливаем позиционирование для z-index */
    }

    .gallery-item-telegram.enlarged img {
        transform: scale(2.0); /* Увеличиваем изображение */
        z-index: 10; /* Поднимаем изображение над остальными */
        position: relative; /* Устанавливаем позиционирование для z-index */
    }
}
/* ------------------------------------------------------------------ */

/* текст */
/* ------------------------------------------------------------------ */
/* для десктопов */
@media (min-width: 768px) {
    .gallery-item-mail::after,
    .gallery-item-telegram::after {
        content: attr(data-description); /* Используем значение из атрибута data-description */
        position: absolute; /* Абсолютное позиционирование для размещения над изображением */
        top: 50%; /* Располагаем верхний край текста по центру вертикали */
        left: 50%; /* Располагаем левый край текста по центру горизонтали */
        transform: translate(-50%, -50%); /* Центрируем текст по горизонтали и вертикали */
        background-color: rgba(0, 0, 0, 0.7); /* Полупрозрачный фон */
        color: #fff; /* Белый текст */
        padding: 5px 10px; /* Внутренние отступы */
        border-radius: 5px; /* Закругленные углы */
        opacity: 0; /* Скрываем описание по умолчанию */
        transition: opacity 0.3s ease; /* Плавное появление описания */
        pointer-events: none; /* Отключаем взаимодействие с описанием */
        z-index: 15; /* Устанавливаем z-index выше чем у изображения при увеличении */
    }
}

/* для смартфонов */
@media (max-width: 767px) {
    .gallery-item-mail::after,
    .gallery-item-telegram::after {
        content: attr(data-description); /* Используем значение из атрибута data-description */
        position: absolute; /* Абсолютное позиционирование для размещения над изображением */
        bottom: 10px; /* Отступ от нижнего края */
        left: 50%; /* Центрируем текст по горизонтали */
        transform: translateX(-50%); /* Центрируем текст по горизонтали */
        background-color: rgba(0, 0, 0, 0.2); /* Полупрозрачный фон */
        color: #fff; /* Белый текст */
        padding: 5px 10px; /* Внутренние отступы */
        border-radius: 5px; /* Закругленные углы */
        opacity: 0; /* Скрываем описание по умолчанию */
        transition: opacity 0.3s ease; /* Плавное появление описания */
        pointer-events: none; /* Отключаем взаимодействие с описанием */
        z-index: 15; /* Устанавливаем z-index выше чем у изображения при увеличении */
    }
}
/* ------------------------------------------------------------------ */

/* показываем описание при наведении на изображение
.gallery-item:hover::after {
    opacity: 1; /* Показываем описание при наведении */
/*}*/

/* показываем описание при клике на изображение */
.gallery-item-mail.enlarged::after,
.gallery-item-telegram.enlarged::after {
    opacity: 1; /* Показываем описание при клике на изображение */
}

.character {
    width: 50px;
    height: 50px;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 270px;
    left: 0;
    cursor: pointer;
    z-index: 1000;
    border-radius: 50%;
    opacity: 0; /* Изначально скрываем человечков */
    transition: opacity 0.5s ease-in; /* Плавное появление */
}

#character1 {
    background-image: url('/static/images/character_1.png'); /* Изображение 1 */
}

#character2 {
    background-image: url('/static/images/character_2.png'); /* Изображение 2*/
}

#character3 {
    background-image: url('/static/images/character_3.png'); /* Изображение 3 */
}

#character4 {
    background-image: url('/static/images/character_4.png'); /* Изображение 4 */
}

.images-container {
    display: flex;
    align-items: center;
    justify-content: center; /* Выравнивание по центру */
    flex-wrap: wrap; /* Разрешаем перенос изображений на новую строку, если не помещаются */
    gap: 10px; /* Расстояние между изображениями */
}

.particle {
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: red;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity 1s ease-out;
}

/* игра */
/* ------------------------------------------------------------------ */
#game-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr); /* столбцы */
  grid-template-rows: repeat(6, 1fr); /* строки */
  gap: 10px; /* Отступ между клетками */
  width: 100%;
  max-width: 250px; /* Максимальная ширина контейнера */
  margin: 20px auto 0; /* Отступ сверху px, центрирование по горизонтали */
}

.cell {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f0f0f0;
  width: 100%;
  height: 100%;
  border: 1px solid #ddd;
  font-size: 30px;
  cursor: pointer;

  /* Добавляем aspect-ratio для того, чтобы клетки были квадратными */
  aspect-ratio: 1; /* Соотношение ширины и высоты — 1:1 */
}

.cell img {
  width: 60%;
  height: 60%;
}

#restart-button {
  display: block;
  margin-top: 30px; /* Отступ сверху для кнопки */
  margin-left: auto;
  margin-right: auto; /* Центрируем кнопку */
  padding: 7px 12px;
  font-size: 12px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#restart-button:hover {
  background-color: #0056b3;
}

#win-message1,
#win-message2 {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*background-color: rgba(0, 123, 255, 0.9);*/
  color: white;
  padding: 20px 40px;
  font-size: 24px;
  font-weight: bold;
  border-radius: 10px;
  text-align: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  z-index: 1000;
}

#win-message1 {
  background-color: rgba(40, 167, 69, 0.9); /* Зеленый фон */
}

#win-message2 {
  background-color: rgba(220, 53, 69, 0.9); /* Красный фон */
}

.hidden {
  display: none;
}

.explode {
  animation: explode 0.5s ease-out forwards;
}

@keyframes explode {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2); opacity: 0; }
}
/* ------------------------------------------------------------------ */

/* Running bot */
/* ------------------------------------------------------------------ */
#running-bot {
  position: fixed;
  top: 10px; /* Стартовая позиция сверху */
  left: 50%;
  transform: translateX(-50%);
  width: 45px; /* Размер контейнера */
  height: 45px; /* Размер контейнера */
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
  border-radius: 20%; /* Делаем контейнер круглым */
  overflow: hidden; /* Обрезаем изображение по кругу */
  display: flex;
  justify-content: center;
  align-items: center;
}

#running-bot img {
  width: 100%; /* Заполняет контейнер по ширине */
  height: 100%; /* Заполняет контейнер по высоте */
  object-fit: cover; /* Обрезает изображение, сохраняя пропорции */
}

/* Шейк анимация */
@keyframes shake {
  0% { transform: translateX(-10px); }
  50% { transform: translateX(10px); }
  100% { transform: translateX(0); }
}

.shake {
  animation: shake 0.2s ease-in-out;
}
/* ------------------------------------------------------------------ */

.back-btn {
    display: inline-block;
    margin-bottom: 25px;
    padding: 10px 18px;
    background: #2b87ff;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    transition: 0.2s;
}

.back-btn:hover {
    background: #1a5fcc;
}

.container-solutions {
    max-width: 900px;
    margin: 40px auto;
    padding: 20px;
    text-align: left;
}

.container-solutions h1 {
    text-align: center;
    margin-bottom: 40px;
}

.solution-card {
    background-color: white;
    padding: 25px;
    margin-bottom: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.solution-card h2 {
    margin-bottom: 15px;
    color: #152fd6;
}

.solution-card ul {
    margin: 15px 0;
    padding-left: 20px;
}

.price {
    margin-top: 15px;
    font-size: 18px;
    font-weight: bold;
    color: #2F4F4F;
}