@font-face {
    font-family: 'Roboto-Light';
    src: url('/static/fonts/Roboto-Light.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

html, body {
    height: 100%;
    margin: 0; /* Убираем отступы у body и html */
    padding: 0;
    font-size: 14px;
    font-family: 'Roboto-Light', sans-serif;
}

.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Высота страницы равна высоте окна браузера */
}

#django-content {
    flex: 1; /* Контент занимает всю доступную высоту, толкая футер вниз */
}

.footer {
    background-color: #333; /* Цвет фона для футера */
    color: white; /* Цвет текста */
    padding: 20px; /* Отступы внутри футера */
    text-align: center; /* Выравнивание текста по центру */
}

.navigation_panel {
    display: flex;
    justify-content: space-between; /* Разделяет контент на две стороны */
    align-items: center; /* Выравнивает элементы по вертикали по центру */
    width: 90%; /* Занимает 90% ширины экрана */
    margin: 0 auto; /* Центрирует блок по горизонтали */
    padding: 10px; /* Добавляет немного пространства внутри панели */
    box-sizing: border-box; /* Включает padding и border в общую ширину блока */
}

.navigation_panel_left {
    display: flex;
    align-items: center;
}

.navigation_panel_right {
    display: flex;
    gap: 15px; /* Добавляет промежуток между кнопками */
}

.btn-navig {
    padding: 10px 20px; /* Пространство внутри кнопок */
    background-color: transparent; /* Прозрачный фон */
    color: black; /* Черный цвет текста */
    border: 2px solid #f0c04e; /* Желтый цвет рамки */
    cursor: pointer; /* Меняет курсор на указатель */
    font-family: 'Roboto-Light', sans-serif;
    box-shadow: 0 0 5px #f0c04e; /* Небольшая тень желтого цвета */
    transition: all 0.3s ease; /* Плавный переход для всех эффектов */
}

.btn-navig:hover {
    background-color: #f0c04e; /* Желтый цвет при наведении */
    color: white; /* Белый цвет текста при наведении */
    box-shadow: 0 0 10px #e6b800; /* Более яркая желтая тень при наведении */
    transform: scale(1.1); /* Увеличение кнопки на 10% при наведении */
}

.main_container {
    display: flex;
    width: 95%; /* Контейнер занимает 95% ширины родителя */
    margin: 0 auto; /* Центрируем контейнер по горизонтали */
    box-sizing: border-box;
}

.left_container {

    width: 77%; /* Занимает 85% ширины main_container */
    padding: 2px; /* Отступы для внутреннего контента */
    box-sizing: border-box;
    border-right: 2px solid #ccc; /* Вертикальная линия отделяющая left_container */
}

.filters-list {
    width: 100%;
    margin: 0 auto; /* Центрируем контейнер по горизонтали */
}


.about {
    display: flex;

}

.about2 {
    width: 98%;

}

.review {
    display: flex;
    height: 100%;
}



.image {
    justify-content: center;  /* Центрируем изображение внутри контейнера */
    align-items: center;      /* По вертикали тоже */
    width: 100%;              /* Убедитесь, что контейнер занимает 100% ширины родителя */
 }

.main_image {
    display: block;  /* Превращаем изображение в блочный элемент */
    width: 80%;      /* Задаем ширину изображения */
    margin: 0 auto;

}


.about_clients {
    display: flex;
    flex-direction: row; /* Элементы располагаются в строку */
    height: auto; /* Автоматическая высота */
    min-height: 100px; /* Минимальная высота для правильного размещения */
    width: 100%;
    gap: 20px; /* Расстояние между левым и правым контейнером */
    margin: 0 auto; /* Центрируем контейнер по горизонтали */
}

.left_left_container {
    width: 35%; /* Занимает 85% ширины main_container */
    padding: 2px; /* Отступы для внутреннего контента */
    box-sizing: border-box;
}
.right_left_container {
    width: 60%; /* Занимает 10% ширины main_container */
    padding: 2px;
    overflow-y: auto; /* Скроллинг по вертикали при большом количестве новостей */
    box-sizing: border-box;
}


.left_left_review_container {
    width: 35%; /* Занимает 85% ширины main_container */
    padding: 2px; /* Отступы для внутреннего контента */
    box-sizing: border-box;
}
.right_left_review_container {
    width: 60%; /* Занимает 10% ширины main_container */
    height: 100%;
    min-height: 500px;
    padding: 2px;
    overflow-y: auto; /* Скроллинг по вертикали при большом количестве новостей */
    box-sizing: border-box;
}



.left_clients_filter_container {
    width: 65%; /* Занимает 85% ширины main_container */
    padding: 2px; /* Отступы для внутреннего контента */
    box-sizing: border-box;
    display: flex;
    flex-direction: column; /* Расположить элементы друг под другом */
    align-items: stretch; /* Растянуть элементы на всю ширину/высоту контейнера */

}
.right_clients_filter_container {
    width: 30%; /* Занимает 10% ширины main_container */
    padding: 2px;
    box-sizing: border-box;
    display: flex; /* Включает флекс-контейнер */
    flex-direction: column; /* Расположить кнопки друг под другом */
    justify-content: center; /* Вертикальное выравнивание по центру */
    align-items: stretch; /* Растянуть элементы на всю ширину/высоту контейнера */
    margin: 0 auto; /* Центрируем контейнер по горизонтали */
}

/* Текст в правом блоке */
.left_container p {
    width: 100%; /* Оставляем ширину */

    text-align: justify; /* Выравниваем текст по ширине */
}


.right_container {
    width: 20%; /* Занимает 10% ширины main_container */
    padding: 20px;
    overflow-y: auto; /* Скроллинг по вертикали при большом количестве новостей */
    box-sizing: border-box;
}

/* Текст в правом блоке */
.right_container p {
    font-size: 1.2vw; /* Текст адаптируется под ширину экрана */
}

.left_container section {
    display: flex;
    flex-wrap: wrap; /* Перенос строк для создания столбцов */
    gap: 20px; /* Отступы между элементами */
    justify-content: space-between; /* Распределяем элементы равномерно */
}

.left_container section p {
    flex: 1 1 calc(30% - 5px); /* Занимает 50% ширины контейнера за вычетом отступа */
    margin: 0;
    padding: 2px;
    box-sizing: border-box;
}
.service-item {
    width: calc(25% - 20px); /* Каждый элемент занимает треть ширины, учитывая отступы */
    box-sizing: border-box;
    text-align: center; /* Центрируем содержимое по горизонтали */
    padding: 2px;
    margin-bottom: 2px; /* Отступ снизу между строками */
    display: flex;
    flex-direction: column; /* Размещаем содержимое по вертикали */
    align-items: center; /* Центрируем содержимое по горизонтали */
}

.service-image-container {
    display: flex;
    justify-content: center; /* Центрируем изображение внутри контейнера */
    align-items: center;
    width: 100%;
}

.service-image {
    width: 180px; /* Ширина изображения 200px */
    height: 180px; /* Высота изображения 200px */
    object-fit: cover; /* Сохраняем пропорции изображения, заполняя контейнер */
    margin-bottom: 5px; /* Отступ снизу под изображением */
    transition: all 0.3s ease; /* Плавный переход для всех эффектов */
}


.service-image:hover {

    box-shadow: 0 0 10px #e6b800; /* Более яркая желтая тень при наведении */
    text-decoration: none; /* Убирает подчеркивание */
    transform: scale(1.1); /* Увеличение кнопки на 10% при наведении */
}



.service-name-container {
    display: flex;
    justify-content: center; /* Центрируем текст по горизонтали */
    align-items: center;
    width: 100%;
}

.service-item p {
    display: inline-block; /* Сужаем блок под размер текста */
    margin: 0;
    text-align: center; /* Центрируем текст, если будет перенос строк */
}

.client-item {
    width: calc(29% - 5px); /* Каждый элемент занимает треть ширины, учитывая отступы */
    box-sizing: border-box;
    text-align: center; /* Центрируем содержимое по горизонтали */
    padding: 2px;
    margin-bottom: 2px; /* Отступ снизу между строками */
    display: flex;
    flex-direction: column; /* Размещаем содержимое по вертикали */
    align-items: center; /* Центрируем содержимое по горизонтали */
}

.client-image-container {
    display: flex;
    justify-content: center; /* Центрируем изображение внутри контейнера */
    align-items: center;
    width: 100%;
}

.client-image {
    width: 188px; /* Ширина изображения 200px */
    height: 75px; /* Высота изображения 200px */
    object-fit: cover; /* Сохраняем пропорции изображения, заполняя контейнер */
    margin-bottom: 10px; /* Отступ снизу под изображением */
    transition: all 0.3s ease; /* Плавный переход для всех эффектов */
}


.client-image:hover {

    text-decoration: none; /* Убирает подчеркивание */
    transform: scale(1.1); /* Увеличение кнопки на 10% при наведении */
}




.client-name-container {
    display: flex;
    justify-content: center; /* Центрируем текст по горизонтали */
    align-items: center;
    width: 100%;
}

.client-name-container p{
    font-size: 11px;
}

.size {
    font-size: 12px;
}

.client-item p {
    display: inline-block; /* Сужаем блок под размер текста */
    margin: 0;
    text-align: center; /* Центрируем текст, если будет перенос строк */
}


 /* Стили применяются только к содержимому новости */
.news_content {
    white-space: nowrap; /* Запрещает перенос строки */
    overflow: hidden; /* Скрывает текст, выходящий за пределы контейнера */
    text-overflow: ellipsis; /* Добавляет многоточие в конце */
}

.news_separator {
    border: none; /* Убираем дефолтный стиль */
    border-top: 1px solid #ccc; /* Добавляем тонкую горизонтальную линию */
    margin: 10px 0; /* Отступы сверху и снизу */
}

.news_item {
    margin-bottom: 8px; /* Промежуток между новостями */
}

.news_item p {
    font-size: 14px;
}

.right_container .news_item:nth-of-type(n+4) {
    display: none; /* Скрываем новости, начиная с четвертой */
}


.auth_title {
    text-align: center;
    font-size: 20px;
    font-weight: bold; /* Жирный шрифт */
}

.main_separator {
    border: none; /* Убираем дефолтный стиль */
    border-top: 1px solid #ccc; /* Добавляем тонкую горизонтальную линию */
    margin: 0 auto; /* Центрируем контейнер по горизонтали */
    width: 95%;
}

.center {
     text-align: center;
}

.btn-dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 1;
}

.btn-dropdown:hover .dropdown-content {
    display: block;
}

.dropdown-content a {
    color: black;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
    transition: all 0.3s ease; /* Плавный переход для всех эффектов */
}

.dropdown-content a:hover {
    background-color: #f0c04e; /* Желтый цвет при наведении */
    color: white; /* Белый цвет текста при наведении */
    box-shadow: 0 0 10px #e6b800; /* Более яркая желтая тень при наведении */
    transform: scale(1.1); /* Увеличение кнопки на 10% при наведении */
}
.about_img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}

.service_detail_img {
    max-width: 100%; /* Ограничиваем ширину изображения размером контейнера */
    max-height: 100%; /* Ограничиваем высоту размером контейнера */
    width: auto; /* Сохраняем пропорции при изменении размера */
    height: auto; /* Сохраняем пропорции при изменении размера */
    object-fit: contain; /* Вписываем изображение внутрь контейнера */
    display: block; /* Убираем лишние отступы, которые могут появляться у inline-изображений */
    margin: 0 auto; /* Центрируем изображение по горизонтали */
}
/* Всплывающая подсказка */
.tooltip {
    position: relative;
    display: inline-block;
    width: 100%; /* Занимает 100% ширины родителя */
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #6c757d;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%; /* Позиция подсказки выше */
    left: 50%;
    margin-left: -60px;
    opacity: 0;
    transition: opacity 0.3s;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}


.btn-client_filter {
    padding: 10px 20px; /* Пространство внутри кнопок */
    width: 80%; /* Занимать 80% ширины родителя */
    background-color: transparent; /* Прозрачный фон */
    color: black; /* Черный цвет текста */
    border: 2px solid #f0c04e; /* Желтый цвет рамки */
    cursor: pointer; /* Меняет курсор на указатель */
    box-shadow: 0 0 5px #f0c04e; /* Небольшая тень желтого цвета */
    text-decoration: none; /* Убирает подчеркивание */
    transition: all 0.3s ease; /* Плавный переход для всех эффектов */
    height: 48px; /* Фиксированная высота кнопок */
    display: flex; /* Убедимся, что текст в кнопках центрируется */
    align-items: center;
    justify-content: center;
    white-space: nowrap; /* Запрет переноса текста на новую строку */
}



.btn-client_filter a {
    text-decoration: none;
    color: inherit; /* цвет текста будет наследоваться от родителя */
}
.btn-client_filter p {
    font-size: 14px; /* Размер шрифта */
}
.btn-client_filter option {
    font-family: 'Roboto-Light', sans-serif !important;
    font-size: 14px; /* Размер шрифта */
}

.btn-client_filter select {
    font-family: 'Roboto-Light', sans-serif !important;
    font-size: 14px; /* Размер шрифта */
}

.btn-client_filter:hover {
    background-color: #f0c04e; /* Желтый цвет при наведении */
    color: white; /* Белый цвет текста при наведении */
    box-shadow: 0 0 10px #e6b800; /* Более яркая желтая тень при наведении */
    text-decoration: none; /* Убирает подчеркивание */
    transform: scale(1.1); /* Увеличение кнопки на 10% при наведении */
}


.btn-review {
    padding: 2px 2px; /* Пространство внутри кнопок */
    width: 100%; /* Занимать 80% ширины родителя */
    background-color: transparent; /* Прозрачный фон */
    color: black; /* Черный цвет текста */
    border: 2px solid #f0c04e; /* Желтый цвет рамки */
    cursor: pointer; /* Меняет курсор на указатель */
    box-shadow: 0 0 5px #f0c04e; /* Небольшая тень желтого цвета */
    text-decoration: none; /* Убирает подчеркивание */
    transition: all 0.3s ease; /* Плавный переход для всех эффектов */
    height: 55px; /* Фиксированная высота кнопок */
    display: flex; /* Убедимся, что текст в кнопках центрируется */
    align-items: center;
    justify-content: center;
    font-size: calc(4px + 0.5vw); /* Основной размер 10px + динамическая часть, зависящая от ширины экрана */
    overflow: hidden; /* Скрывает текст, выходящий за пределы */
}


.btn-review:hover {
    background-color: #f0c04e; /* Желтый цвет при наведении */
    color: white; /* Белый цвет текста при наведении */
    box-shadow: 0 0 10px #e6b800; /* Более яркая желтая тень при наведении */
    text-decoration: none; /* Убирает подчеркивание */
    transform: scale(1.1); /* Увеличение кнопки на 10% при наведении */
}


.filter-label {
    display: block; /* Обеспечить перенос метки на новую строку */
    width: 80%; /* Занимать 80% ширины родителя */
    margin-bottom: 10px; /* Отступ снизу для красоты */
    text-align: center; /* Центрирование текста */
    font-weight: bold; /* Жирный шрифт для метки */
}

/* Для поля выбора */
.filter-field {
    width: 100%; /* Занимает 100% ширины родителя */
    height: 100%;
}

/* Само поле выбора (select) */
.filter-field select {
    width: 100%; /* Растянуть на 100% ширины контейнера */
    box-sizing: border-box; /* Учитывать рамки и внутренние отступы в ширине */
    transition: all 0.3s ease; /* Плавный переход для всех эффектов */
    box-shadow: 0 0 5px #f0c04e; /* Небольшая тень желтого цвета */
    padding: 5px; /* Внутренние отступы для удобства */
    border: 2px solid #f0c04e; /* Желтый цвет рамки */
    border-radius: 5px; /* Скругленные углы */
    font-size: 14px; /* Размер шрифта */
    height: 100px; /* Установить ту же высоту, что у кнопок */
}

.btn-client {
    padding: 10px 20px; /* Пространство внутри кнопок */
    width: 80%; /* Занимать 80% ширины родителя */
    background-color: transparent; /* Прозрачный фон */
    color: black; /* Черный цвет текста */
    border: 2px solid #f0c04e; /* Желтый цвет рамки */
    cursor: pointer; /* Меняет курсор на указатель */
    box-shadow: 0 0 5px #f0c04e; /* Небольшая тень желтого цвета */
    text-decoration: none; /* Убирает подчеркивание */
    transition: all 0.3s ease; /* Плавный переход для всех эффектов */
    height: 25px; /* Фиксированная высота кнопок */
    display: flex; /* Убедимся, что текст в кнопках центрируется */
    align-items: center;
    justify-content: center;
    font-size: 14px; /* Размер шрифта */

}

.btn-client a {
    text-decoration: none;
    color: inherit; /* цвет текста будет наследоваться от родителя */
}

.btn-client p {
    font-size: 14px; /* Размер шрифта */
}


.btn-client:hover {
    background-color: #f0c04e; /* Желтый цвет при наведении */
    color: white; /* Белый цвет текста при наведении */
    box-shadow: 0 0 10px #e6b800; /* Более яркая желтая тень при наведении */
    text-decoration: none; /* Убирает подчеркивание */
    transform: scale(1.1); /* Увеличение кнопки на 10% при наведении */
}



.btn-contact {
    padding: 10px 20px; /* Пространство внутри кнопок */
    width: 98%; /* Занимать 80% ширины родителя */
    background-color: transparent; /* Прозрачный фон */
    color: black; /* Черный цвет текста */
    border: 2px solid #f0c04e; /* Желтый цвет рамки */
    cursor: pointer; /* Меняет курсор на указатель */
    box-shadow: 0 0 5px #f0c04e; /* Небольшая тень желтого цвета */
    text-decoration: none; /* Убирает подчеркивание */
    transition: all 0.3s ease; /* Плавный переход для всех эффектов */
    height: 25px; /* Фиксированная высота кнопок */
    display: flex; /* Убедимся, что текст в кнопках центрируется */
    align-items: center;
    justify-content: center;
    font-size: 14px; /* Размер шрифта */

}

.btn-contact a {
    text-decoration: none;
    color: inherit; /* цвет текста будет наследоваться от родителя */
}


.btn-contact:hover {
    background-color: #f0c04e; /* Желтый цвет при наведении */
    color: white; /* Белый цвет текста при наведении */
    box-shadow: 0 0 10px #e6b800; /* Более яркая желтая тень при наведении */
    text-decoration: none; /* Убирает подчеркивание */
    transform: scale(1.1); /* Увеличение кнопки на 10% при наведении */
}


.pagination {
    align-items: center;
    justify-content: center;
    text-align: center; /* Центрирование текста */
}


.ckeditor-content {
    width: 100%;
    font-family: 'Roboto-Light', sans-serif !important; /* Заменяем шрифт на наследуемый */
    font-size: 14px !important;
    line-height: 1.5;
    text-align: justify; /* Выравнивание текста по ширине */
}

.ckeditor-content p,
.ckeditor-content div,
.ckeditor-content ul,
.ckeditor-content li {
    margin: 0; /* Убираем стандартные отступы */
    padding: 0; /* Убираем стандартные внутренние отступы */
}

.ckeditor-content ul {
    list-style-position: outside; /* Размещаем маркеры за пределами текста */
    margin: 0 0 0 20px; /* Добавляем только левый отступ для списка */
    padding: 0;
}

.ckeditor-content li {
    text-align: justify; /* Выравнивание текста внутри элементов списка */
    margin: 0;
    padding: 0;
    list-style-position: outside; /* Убедимся, что маркеры вне текста */
    overflow-wrap: break-word; /* Переносим длинные слова, если есть */
    word-wrap: break-word;
}


.ckeditor-content_left p,
.ckeditor-content_left div,
.ckeditor-content_left ul,
.ckeditor-content_left li {
    font-size: 14px;
    line-height: 1.5;
    padding: 2px;
    margin: 0; /* Убираем отступы */
    text-align: justify; /* Выравнивание текста по ширине */
    font-family: 'Roboto-Light', sans-serif !important; /* Заменяем шрифт на наследуемый */
}

.ckeditor-content_left ul {
    list-style-position: outside; /* Размещаем маркеры за пределами текста */
    margin-left: 20px; /* Добавляем отступ для списка */
}

.ckeditor-content_left li {
    text-align: justify; /* Выравниваем текст внутри элементов списка */
}



modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 800px;
    width: 90%;
    position: relative;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

#pdf-preview-container {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 4px;
    background-color: #f9f9f9;
}


.contacts {
    display: flex;
    flex-direction: column; /* Вертикальное расположение элементов */
    height: 70vh; /* Высота на весь экран */
}

.upper_contacts_container {
    flex: 1; /* Это займет 50% высоты */
    display: flex;  /* Элементы внутри родителя располагаются в ряд */
    width: 100%;
    gap: 20px;  /* Расстояние между столбцами */
    justify-content: space-between;  /* Разделяет контейнеры по ширине */
}


.left_down_contacts_container {
    flex: 1; /* Это тоже займет оставшиеся 50% */
    height: 100%;  /* Убедитесь, что контейнер будет занимать всю доступную высоту */
}

.left_upper_contacts_container {
    display: flex;
    flex-direction: row; /* Горизонтальное расположение */
    width: 58%;
    align-items: flex-start; /* Верхнее выравнивание содержимого */
    gap: 20px; /* Расстояние между колонками */
}

.right_upper_contacts_container {
    display: flex;
    flex-direction: column;
    width: 40%;
    align-items: flex-start;
    gap: 5px;

}
.upper_left_icon_container {
    width: 100px;  /* Задайте фиксированную ширину для контейнера иконок */
    display: flex;
    flex-direction: column; /* Вертикальное расположение */
    align-items: center; /* Центрируем иконки */
    gap: 10px;
}

.upper_right_text_container {
    flex: 1;  /* Занимает оставшееся пространство */
    display: flex;
    flex-direction: column;
    gap: 30px;
}


.marg {
    margin-bottom: 10px;
}


.ckeditor-content_contact p,
.ckeditor-content_contact div,
.ckeditor-content_contact ul,
.ckeditor-content_contact li {
    font-size: 14px;
    line-height: 1.5;
    padding: 2px;
    margin: 0; /* Убираем отступы */

    text-align: justify; /* Выравнивание текста по ширине */
    font-family: 'Roboto-Light', sans-serif !important; /* Заменяем шрифт на наследуемый */
}

.ckeditor-content_contact ul {
    list-style-position: outside; /* Размещаем маркеры за пределами текста */
    margin-left: 20px; /* Добавляем отступ для списка */
}

.ckeditor-content_contact li {
    text-align: justify; /* Выравниваем текст внутри элементов списка */
}


.form-group {
    width: 100%; /* Занимать 100% ширины родителя */
    margin-bottom: 5px; /* Добавим отступ снизу для каждого поля */
}


.contact_img img {
    max-width: 100%;
    height: 100px;
}


.form-group input,
.form-group textarea {
    width: 98%; /* Сделаем поля ввода на всю ширину */
    padding: 1px; /* Пространство внутри поля */
    border: 2px solid #f0c04e; /* Рамка, как у кнопки */
    box-sizing: border-box; /* Учитываем отступы в ширине */
    font-size: 14px; /* Размер шрифта */
    transition: all 0.3s ease; /* Плавный переход для всех эффектов */
}

.form-group input:focus,
.form-group textarea:focus {
    border-color: #e6b800; /* Изменим цвет рамки при фокусе */
    outline: none; /* Убираем стандартную рамку */
}

.form-group textarea {
    resize: vertical; /* Позволяет изменять размер по вертикали */
    min-height: 50px; /* Минимальная высота для текстового поля */
    height: 130px;
}

.form-group input:hover,
.form-group textarea:hover {
    border-color: #e6b800; /* Цвет рамки при наведении */
    transform: scale(1.02); /* Легкое увеличение поля при наведении */
}

.form-group label {
    font-weight: bold;
    margin-bottom: 1px;
}


.map-container {
    width: 100%;
    height: 100%;  /* Использует 100% от высоты контейнера .left_down_contacts_container */
    margin: 0 auto;  /* Центрирует карту по горизонтали */
    border-radius: 8px;  /* Закругляем углы */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  /* Тень вокруг карты */
    position: relative;
}

.google-map-iframe {
    width: 100%;
    height: 100%;  /* Высота на 100% от родительского контейнера .map-container */
    border: none;  /* Убираем рамки */
}


#success-popup {
    background-color: #e6b800;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);  /* Тень вокруг карты */
    color: #0e0d0d;
    display: none;
    left: 50%;
    padding: 20px;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000
}

#success-popup.fade-in {
    animation: fadeIn .5s forwards
}

#success-popup.fade-out {
    animation: fadeOut .5s forwards
}

.alert,
.popup {
    background-color: #e6b800;
    border-radius: 10px;
    box-shadow: 0 0 10px 2px #e6b8008c;
    color: #0e0d0d;
    display: none;
    left: 50%;
    max-width: 80%;
    opacity: 0;
    padding: 20px;
    position: fixed;
    text-align: center;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: opacity .5s ease-in-out;
    z-index: 1000
}

.fade-in {
    opacity: 1
}

.fade-out {
    opacity: 0
}

.alert {
    display: block
}

.alert.error,
.alert.info,
.alert.success {
    background-color: #e6b800
}

.alert button,
.popup button {
    background: #ffffff;
    border: none;
    border-radius: 5px;
    box-shadow: 0 0 10px 2px #e6b8008c;
    color: #0e0d0d;
    cursor: pointer;
    font-size: 16px;
    padding: 10px 20px;
    transition: box-shadow .3s ease, transform .3s ease
}

.alert button:hover,
.popup button:hover {
    background: #ffffff;
    box-shadow: 0 0 15px 4px #e6b800;
    transform: scale(1.1)
}

.popup-content {
    padding: 20px
}

.popup .close {
    color: #0e0d0d;
    cursor: pointer;
    font-size: 24px;
    font-weight: 700;
    position: absolute;
    right: 7px;
    top: 10px
}


.creator p {
    font-size:12px;
    color: white;
    text-decoration: none; /* Убирает подчеркивание */
}



@media (max-width: 1024px) {
    .client-item {
        width: calc(33.33% - 20px); /* Треть ширины контейнера */
    }

    .clients-image {
        width: 150px; /* Уменьшение ширины изображения */
        height: 60px; /* Пропорциональное уменьшение высоты */
    }
    .client-image {
        width: 150px; /* Еще большее уменьшение ширины */
        height: 60px; /* Пропорциональное уменьшение высоты */
    }

    .client-item p {
        font-size: 14px; /* Уменьшение размера текста */
    }

}

@media (max-width: 768px) {

    .dropdown-content {
        display: none;
    }

    .ckeditor-content_contact p {
        font-size: 11px;
        line-height: 1.2;
    }

    .about_img {
        max-width: 90%;
    }

    .btn-client p {
        font-size: 11px; /* Размер шрифта */
    }

    .ckeditor-content {
        font-size: 12px !important;
    }

    .service-image {
        width: 100px; /* Ширина изображения 200px */
        height: 100px; /* Высота изображения 200px */

    }

    .form-group input,
    .form-group textarea {
       font-size: 12px; /* Размер шрифта */
    }

    .btn-contact {
        font-size: 12px; /* Размер шрифта */
    }

    .form-group {
        font-size: 11px;
    }

    .hide-on-mobile {
        display: none !important; /* Полностью скрывает элемент */
    }

    .left_container {
        width: 100%;
        border-right: none; /* Убираем правую границу */
    }

    .marg {
        margin-bottom: 1px;
     }

    .btn-client_filter p {
        font-size: 12px; /* Для устройств с шириной экрана менее 768px */
    }

    .btn-client_filter option {
        font-size: 12px; /* Размер шрифта */
    }

    .btn-client_filter select {
        font-size: 12px; /* Размер шрифта */
    }


    .filter-field select{
        font-size: 12px; /* Для устройств с шириной экрана менее 768px */
    }
    .client-item {
        width: calc(50% - 20px); /* Половина ширины контейнера */
    }

    .btn-review {
        font-size: 12px; /* Для устройств с шириной экрана менее 768px */
    }

    .clients-image {
        width: 120px; /* Еще большее уменьшение ширины */
        height: 50px; /* Пропорциональное уменьшение высоты */
    }
    .client-image {
        width: 120px; /* Еще большее уменьшение ширины */
        height: 50px; /* Пропорциональное уменьшение высоты */
    }

    .contact_img {
        width: 50px; /* Еще большее уменьшение ширины */
        height: 50px; /* Пропорциональное уменьшение высоты */
        margin-bottom: 50px;
    }

    .contact_img_img {
        width: 50px; /* Еще большее уменьшение ширины */
        height: 50px; /* Пропорциональное уменьшение высоты */
    }

    .client-item p {
        font-size: 12px; /* Еще меньше размер текста */
    }
     .about {
       align-items: center; /* Центрируем содержимое */
    }

    .left_left_container,
    .right_left_container {
        width: 100%; /* Оба контейнера занимают всю ширину */
    }

    .service_detail_img {
        width: 90%; /* Уменьшаем ширину изображения на маленьких экранах */
        max-height: 300px; /* Максимальная высота */
    }
}

@media (max-width: 480px) {

    .form-group input,
    .form-group textarea {
       font-size: 9px; /* Размер шрифта */
    }

    .btn-client p {
        font-size: 9px; /* Размер шрифта */
    }

    .about_img {
        max-width: 50%;
    }


    .ckeditor-content_contact p {
        font-size: 9px;
        line-height: 1.0;

    }

    .ckeditor-content {
        font-size: 9px !important;
    }

    .service-image {
        width: 60px; /* Ширина изображения 200px */
        height: 60px; /* Высота изображения 200px */

    }


    .btn-contact {
        font-size: 9px; /* Размер шрифта */
    }

    .form-group {
        font-size: 9px;
    }

    .btn-client_filter p {
        font-size: 9px; /* Для очень маленьких экранов */
    }


    .btn-client_filter option {
        font-size: 9px; /* Размер шрифта */
    }

    .btn-client_filter select {
        font-size: 9px; /* Размер шрифта */
    }



    .btn-review {
        font-size: 9px; /* Для устройств с шириной экрана менее 480 */
    }


    .filter-field select{
        font-size: 9px; /* Для устройств с шириной экрана менее 480 */
    }
     .client-item {
        width: calc(100% - 20px); /* На мобильных экранах элемент занимает всю ширину */
    }

    .clients-image {
        width: 100px;
        height: auto; /* Сохраняем пропорции, изменяя только ширину */
    }
    .client-image {
        width: 100px;
        height: auto; /* Сохраняем пропорции, изменяя только ширину */
    }

    .client-item p {
        font-size: 9px;
    }

    .contact_img {
        width: 30px; /* Еще большее уменьшение ширины */
        height: 30px; /* Пропорциональное уменьшение высоты */
        margin-bottom: 70px;
    }

    .contact_img_img {
        width: 30px; /* Еще большее уменьшение ширины */
        height: 30px; /* Пропорциональное уменьшение высоты */
    }
}