@font-face {
font-family: winston;
src: url(Fonts/Winston-Regular.ttf);
font-weight: 400;
}

@font-face {
font-family: winston;
src: url(Fonts/Winston-Medium.ttf);
font-weight: 500;
}

@font-face {
font-family: winston;
src: url(Fonts/Winston-SemiBold.ttf);
font-weight: 600;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html {
font-weight: 400;
font-family: winston;
}

body {
box-sizing: border-box;
margin: 0;
width: 100%;
background-color: #F2F2F2;
display: flex;
flex-direction: column;
min-height: 100vh;
}

.banner_all {
width: 100%;
height: 100vh; /* Занимает всю высоту видимой области */
overflow: hidden; /* Обрезает все, что выходит за пределы контейнера */
position: relative; /* Относительное позиционирование для вложенных элементов */
}

.image_banner {
position: absolute; /* Абсолютное позиционирование для изображения */
top: 50%; /* Центрируем изображение по вертикали */
left: 50%; /* Центрируем изображение по горизонтали */
width: auto; /* Авто ширина для сохранения соотношения сторон */
height: 100%; /* Высота 100% для заполнения контейнера */
min-width: 100%; /* Минимальная ширина 100% для заполнения контейнера */
object-fit: cover; /* Масштабируем изображение, сохраняя пропорции */
transform: translate(-50%, -50%); /* Центрируем изображение */
}

.services {
position: absolute;
top: 50%; /* Центрируем по вертикали */
left: 50%; /* Начинаем с центра */
transform: translate(-50%, -50%); /* Центрируем по вертикали и горизонтально */
width: 65vw; /* Ширина блока */
display: flex;
flex-direction: column;
align-items: flex-start; /* Выравнивание по левому краю */
}

.service-block {
opacity: 0; /* Начальное состояние - полупрозрачное */
transform: translateX(-50%); /* Начальное положение - сдвинуто влево */
transition: opacity 0.5s ease, transform 0.5s ease; /* Плавная анимация */
margin: 15px 0; /* Увеличиваем отступы между блоками */
position: relative; /* Для позиционирования стрелки */
color: white; /* Цвет текста белый */
padding-left: 40px; /* Отступ слева для текста */
font-size: 2em; /* Увеличиваем размер текста в 2 раза */
}

.service-block h3 {
margin-left: 20px; /* Увеличиваем отступ слева для заголовка */
}

.service-arrow {
width: 50px; /* Увеличиваем ширину стрелки */
height: 50px; /* Увеличиваем высоту стрелки */
position: absolute; /* Абсолютное позиционирование */
left: 0; /* Положение стрелки слева от блока */
top: 50%; /* Центрируем по вертикали */
transform: translateY(-50%); /* Центрируем по вертикали */
opacity: 0; /* Начальное состояние - полупрозрачное */
transition: opacity 0.5s ease; /* Плавная анимация */
}

.service-block.visible {
opacity: 1; /* Полная видимость */
transform: translateX(0); /* Возвращаем в исходное положение */
}

.service-block.visible .service-arrow {
opacity: 1; /* Полная видимость стрелки */
}

.call-button {
background-color: #5F9EA0; /* Цвет кнопки */
color: white; /* Цвет текста на кнопке */
border: none; /* Убираем рамку */
padding: 10px 20px; /* Отступы внутри кнопки */
margin-left: 55px; /* Отступ слева для текста */
font-size: 1em; /* Размер шрифта */
border-radius: 5px; /* Скругление углов */
cursor: pointer; /* Указатель при наведении */
margin-top: 45px; /* Отступ сверху для кнопки */
display: inline-block; /* Изменяем на inline-block для выравнивания с текстом */
vertical-align: middle; /* Выравнивание по вертикали */
outline: none;
}

.call-button-calc {
background-color: #5F9EA0; /* Цвет кнопки */
color: white; /* Цвет текста на кнопке */
border: none; /* Убираем рамку */
padding: 10px 20px; /* Отступы внутри кнопки */
font-size: 1em; /* Размер шрифта */
border-radius: 5px; /* Скругление углов */
cursor: pointer; /* Указатель при наведении */
display: inline-block; /* Изменяем на inline-block для выравнивания с текстом */
vertical-align: middle; /* Выравнивание по вертикали */
outline: none;
}

.our-service {
padding-top: 80px;
padding-bottom: 80px;
width: 65vw;
margin: 0 auto;
display: flex;
flex-direction: column; /* Устанавливаем вертикальное направление */
align-items: center; /* Центрируем элементы по горизонтали */
}

.our-service h3 {
font-size: 1.6em; /* Увеличиваем размер текста заголовка */
margin-bottom: 40px; /* Увеличиваем отступ снизу для создания пространства */
}

.service-container {
display: flex;
flex-direction: column; /* Устанавливаем вертикальное направление */
gap: 65px; /* Отступы между блоками */
width: 100%; /* Занимаем всю ширину контейнера */
}

.service-block-group {
display: flex; /* Устанавливаем горизонтальное направление */
width: 100%; /* Занимаем всю ширину контейнера */
}

.left-part {
flex: 3; /* 3/5 ширины */
margin-bottom: 25px;
margin-left: 25px;
}

.left-part h4 {
font-size: 1.3em; /* Размер заголовка */
margin-bottom: 20px; /* Отступ между заголовком и списком */
}

.left-part ul {
font-size: 1.2em; /* Размер текста в списке */
padding-left: 20px; /* Отступ слева для списка */
list-style: none; /* Убираем стандартные маркеры списка */
}

.left-part li {
position: relative; /* Устанавливаем позицию для псевдоэлемента */
color: black; /* Цвет текста */
margin-bottom: 10px; /* Отступ между элементами списка */
}

.left-part li .highlight {
font-weight: 600; /* Жирный текст */
color: #5F9EA0; /* Цвет "кадет блю" */
text-decoration: underline; /* Подчёркивание */
text-underline-offset: 2px; /* Отступ подчёркивания (опционально) */
}

.left-part li::before {
content: '';
position: absolute;
left: -20px;
top: 0.45em; /* Точка у верхней границы первой строки текста */
transform: none; /* Убираем трансформацию */
width: 8px;
height: 8px;
background-color: #5F9EA0;
border-radius: 50%;
}

.right-part {
flex: none; /* Отключаем flex-grow и flex-shrink */
width: 360px; /* Фиксированная ширина */
height: 256px; /* Фиксированная высота */
background-color: lightgray; /* Закрашиваем цветом */
display: block; /* Устанавливаем блочный элемент */
margin-left: 45px;
}

.equipment-block {
height: 256px; /* Высота серого блока */
width: 100%; /* Занимаем всю ширину правого блока */
}

.equipment-block img {
width: 100%; /* Make the image take the full width of the block */
height: auto; /* Maintain the aspect ratio of the image */
object-fit: cover; /* Ensure the image covers the block without distortion */
}

.equipment-name {
font-size: 0.8em; /* Размер текста */
color: gray; /* Цвет текста */
margin-top: 5px; /* Уменьшаем отступ сверху для текста */
}

.work-examples {
background-color: #3F3F3F; /* Цвет фона секции "Работы" */
text-align: center; /* Выравнивание текста по центру */
padding: 45px; /* Внутренний отступ */
width: 100%; /* Ширина 100% от родительского контейнера */
overflow: hidden; /* Скрыть содержимое, выходящее за пределы контейнера */
box-sizing: border-box; /* Учитывает отступы и границы в общей ширине */
position: relative; /* Относительное позиционирование для .moving-circle */
display: flex; /* Используем flexbox для управления расположением */
justify-content: center; /* Центрируем содержимое по горизонтали */
}

.work-examples-group {
max-width: 65vw; /* Максимальная ширина 65% от ширины окна просмотра */
width: 100%; /* Ширина 100% от родительского контейнера */
box-sizing: border-box; /* Учитывает отступы и границы в общей ширине */
color: white; /* Цвет текста белый */
text-align: center; /* Выравнивание текста по центру */
display: block; /* Блочный элемент */
}

.work-examples h2 {
margin-top: 20px; /* Отступ сверху для заголовка */
}

.moving-circle {
position: absolute; /* Абсолютное позиционирование элемента */
background-color: rgba(95, 158, 160, 0.5); /* Полупрозрачный цвет фона */
filter: blur(50px); /* Размытие элемента */
border-radius: 40%; /* Овальная форма */
left: 0; /* Позиция слева */
top: 0; /* Позиция сверху */
width: 330px;
height: 230px;
z-index: 0; /* Положение по оси Z (позади других элементов) */
}

.image-gallery-group {
display: grid; /* Использование Grid для компоновки изображений */
grid-template-columns: repeat(2, 1fr); /* 2 колонки одинаковой ширины */
gap: 25px; /* Увеличенный промежуток между изображениями */
margin-top: 40px; /* Отступ сверху */
position: relative; /* Относительное позиционирование для вложенных элементов */
z-index: 1; /* Положение по оси Z (выше фона) */
}

.gallery-image {
width: 100%; /* Ширина изображения 100% от ячейки */
height: auto; /* Автоматическая высота для сохранения пропорций */
transition: transform 0.2s; /* Плавный переход при наведении */
}

.gallery-image:hover {
transform: scale(1.05); /* Увеличение изображения при наведении */
}

/* Обеспечивает, чтобы высота контейнера следовала за изображениями */
.image-gallery-group::after {
content: ''; /* Создает пустой элемент */
display: block; /* Отображение блока */
clear: both; /* Завершает флоаты, если они есть */
}

.question-answer {
width: 65vw; /* Ширина блока */
margin: 45px auto; /* Центрирование блока */
}

.question-answer h2 {
text-align: center; /* Выравнивание заголовка по центру */
margin-bottom: 45px; /* Отступ снизу */
font-size: 24px; /* Увеличенный размер шрифта заголовка */
}

.question {
border: 1px solid #ccc; /* Тонкая серая обводка */
cursor: pointer; /* Указатель при наведении */
padding: 20px; /* Отступы внутри блока вопроса */
transition: box-shadow 0.2s; /* Плавный переход для тени */
display: flex; /* Используем flexbox для размещения элементов */
flex-direction: column; /* Вертикальное расположение элементов */
}

/* Убираем нижнюю обводку у первого вопроса */
.question:first-child {
border-bottom: none; /* Убираем нижнюю границу */
}

/* Убираем верхнюю обводку у второго вопроса */
.question + .question {
border-top: none; /* Убираем верхнюю границу */
}

.question:hover {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Тень при наведении */
border-color: transparent; /* Убираем цвет обводки при наведении */
}

.question-header {
display: flex; /* Используем flexbox для размещения текста и стрелки */
justify-content: space-between; /* Распределяем пространство между вопросом и стрелкой */
align-items: center; /* Выравнивание по центру */
}

.question-text {
margin-right: 25px; /* Отступ справа для создания расстояния до стрелки */
flex-grow: 1; /* Позволяет тексту занимать оставшееся пространство */
white-space: normal; /* Позволяет переносить текст */
overflow-wrap: break-word; /* Перенос слов при необходимости */
font-weight: 600;
}

.answer {
max-height: 0; /* Скрываем ответ по умолчанию */
overflow: hidden; /* Скрываем переполнение */
transition: max-height 0.5s ease, padding 0.5s ease; /* Плавный переход для высоты и отступов */
padding: 0 20px; /* Отступы по бокам */
}

.question.active .answer {
max-height: 236px; /* Установите максимальную высоту для раскрытого состояния */
padding: 15px 20px; /* Увеличенные отступы внутри блока ответа */
}

.arrow-container {
display: flex; /* Используем flexbox для размещения стрелки */
justify-content: center; /* Центрируем стрелку */
align-items: center; /* Выравнивание по центру */
width: 35px; /* Фиксированная ширина квадратика */
height: 35px; /* Фиксированная высота квадратика */
border: 1px solid #ccc; /* Обводка квадратика */
border-radius: 5px; /* Скругление углов квадратика */
transition: background-color 0.2s, border-color 0.2s; /* Плавный переход для фона и обводки */
flex-shrink: 0; /* Запрет на уменьшение ширины квадратика */
}

.question:hover .arrow-container {
background-color: #5F9EA0; /* Цвет фона квадратика при наведении */
border-color: transparent; /* Убираем обводку квадратика при наведении */
}

.arrow {
color: #ccc; /* Цвет стрелки по умолчанию */
transition: color 0.2s; /* Плавный переход для цвета стрелки */
width: 15px; /* Уменьшенная ширина стрелки */
height: 15px; /* Уменьшенная высота стрелки */
transform: rotate(180deg); /* Стрелка смотрит вниз по умолчанию */
}

.question.active .arrow {
transform: rotate(0deg); /* Поворачиваем стрелку вверх при активном вопросе */
color: #fff; /* Цвет стрелки при активном состоянии */
}

.question:hover .arrow {
color: #fff; /* Цвет стрелки при наведении */
}

@media screen and (max-width: 1600px) {
.our-service, .services, .work-examples-group, .question-answer, .price-group {
width: 93vw; /* Ширина для других элементов */
}
.work-examples-group {
max-width: 95vw; /* Максимальная ширина для work-examples-group */
}

.question.active .answer {
max-height: 680px;
}
}

@media screen and (max-width: 1120px) {
.work-examples-group{
max-width: 92.5vw;
}
.image-gallery-group {
grid-template-columns: 1fr; /* Устанавливаем одну колонку */
gap: 45px; /* Увеличиваем промежуток между изображениями */
}
.gallery-image:hover {
transform: scale(1.02); /* Увеличение изображения при наведении */
}
}

@media screen and (max-width: 768px) {
.service-block {
font-size: 1.2em; /* Уменьшаем размер текста */
}
.service-block h3 {
margin-left: 10px; /* Уменьшаем отступ слева для заголовка */
}
.service-arrow {
width: 30px; /* Уменьшаем ширину стрелки */
height: 30px; /* Уменьшаем высоту стрелки */
}
.service-block-group {
flex-direction: column; /* Устанавливаем вертикальное направление */
align-items: center; /* Центрируем элементы по горизонтали */
}
.left-part {
flex: 1; /* Занимаем всю ширину */
margin-bottom: 20px; /* Отступ снизу для разделения блоков */
text-align: center; /* Центрируем текст внутри блока */
}
.equipment-name {
margin-top: 10px;
}
.right-part {
margin-left: 0px;
}
}