* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Roboto', sans-serif; /* Меняем шрифт на Roboto */
            background-image: url('/static/wpapp/img/fon19.jpg');
            background-size: cover; /* Изображение растягивается, чтобы покрыть всю страницу */
            background-position: center; /* Центрируем изображение */
            background-repeat: no-repeat; /* Изображение не повторяется */
            background-attachment: fixed; /* Фиксируем фоновое изображение */
            color: #333;
            padding-top: 0px;  /* нулевой отступ сверху  */
            padding-bottom: 80px; /* Отступ снизу для компенсации высоты футера */
            margin: 0;
        }
        h2 {
            font-family: 'Roboto', sans-serif;
            font-weight: 700; /* Более жирный вариант шрифта */
        }

        button {
            font-family: 'Roboto', sans-serif;
            font-weight: 500; /* Полужирный вариант шрифта */
        }
        header {
            font-family: 'Roboto', sans-serif; /* Меняем шрифт на Roboto */
            position: sticky;  /*  Заменяем fixed на sticky */
            top: 0; /* Хедер прилипает к верхней части экрана при прокрутке */
            left: 0;
            width: 100%;
            z-index: 1000; /* Задаем высокий индекс для перекрытия других элементов */
            /*background: linear-gradient(180deg, rgba(253, 255, 255, 0.5) 7%, rgb(82, 53, 53, 0.5));*/
            background: linear-gradient(180deg, rgb(214, 217, 248, 0.5), rgb(203, 204, 250, 0.5)); /* градиент хедер и футера*/
            padding: 20px;
            display: flex;
            justify-content: space-between; /* Размещаем блоки с равными отступами */
            align-items: center;
            border-radius: 0 0 15px 15px ; /* Закругляем только нижние углы хедера */
            overflow: hidden; /* Скрываем все, что выходит за пределы хедера */
            backdrop-filter: blur(10px); /* Добавляем размытие фона для эффекта */
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Лёгкая тень для отделения от контента */
        }
        header div, footer div {
            font-family: 'Roboto', sans-serif; /* Меняем шрифт на Roboto */
            text-align: center; /* Выравниваем текст в центре каждого блока */
            flex: 1; /* Каждый блок занимает равную ширину */
        }

        header a {
            color: #333;
            text-decoration: none;
        }

        header::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100px; /* Высота псевдоэлемента */
        /*background: rgba(255, 255, 255, 0.8);  Непрозрачная подложка */
        z-index: -1; /* Подложка находится позади контента хедера */
        pointer-events: none;
        }
        header::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            backdrop-filter: blur(20px); /* Размытие контента под хедером */

            pointer-events: none;
        }
        .content {
            overflow: hidden;
            padding: 20px;
            text-align: center;
            position: relative;
            z-index: 0; /* Контент располагается ниже псевдоэлемента */
        }
        .section {
            margin: 20px 0;
        }
        .section h2 {
            margin-bottom: 20px;
            text-align: center;
        }
        /* Контейнер для услуг */
        .service-container {

            display: flex;
            justify-content: space-between; /* Элементы растягиваются по всей ширине */
            gap: 20px; /* Отступы между контейнерами */
        }
        /* Стили для каждого блока с услугами */
        .service-box {
            flex: 1; /* Блоки будут равномерно растягиваться */
            /*background: linear-gradient(180deg, rgb(174, 219, 216, 0.5), rgb(128, 186, 172, 0.5));  Прозрачный градиент контейнеров */
            background: linear-gradient(180deg, rgb(214, 217, 248, 0.5), rgb(203, 204, 250, 0.5)); /* Прозрачный градиент контейнеров */
            /* background-color: #f0f0f0; /* Светло-серая заливка */
            padding: 20px;
            border-radius: 15px; /* Закругленные углы */
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Легкая тень для объема */
            color: #333; /* Цвет текста для контраста с фоном */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Анимация при наведении */
            /* overflow: hidden;  Скрываем все, что выходит за пределы хедера */
            backdrop-filter: blur(10px); /* Добавляем размытие фона для эффекта */
        }

        /* Адаптивные стили для мобильных устройств */
        @media (max-width: 768px) {
            .service-container {
                flex-direction: column; /* Вертикальное расположение на маленьких экранах */
            }
            .service-box {
                margin-bottom: 20px; /* Добавляем отступ снизу между блоками на мобильных устройствах */
            }
        }



        .services ul, .clients ul {
            list-style-type: none;
        }
        .services ul li, .clients ul li {
            margin: 10px 0;
        }
        .clients ul li {
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .clients img {
            width: 50px;
            height: auto;
            margin-right: 10px;
        }
        iframe {
            width: 100%;
            height: 300px;
            border: none;
            border-radius: 15px; /* Закругляем углы карты */
        }
        footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            z-index: 1000; /* Задаем высокий индекс для перекрытия других элементов */
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px;
            border-radius: 15px 15px 0 0; /* Закругляем только верхние углы футера */
            background: linear-gradient(180deg, rgb(214, 217, 248, 0.5), rgb(203, 204, 250, 0.5)); /* Градиент футера*/
        }
        footer div {
            text-align: center;
        }

            /* Стили для формы */
    form {
        display: flex;
        flex-direction: column;
        gap: 10px; /* Равномерные отступы между элементами */
        max-width: 400px;
        margin: 0 auto; /* Центрируем форму */
    }

    /* Стили для инпутов */
    .form-control {
        padding: 10px;
        border-radius: 15px; /* Скругленные углы */
        border: 1px solid #ccc;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Небольшая тень */
        font-size: 16px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Стили для кнопки 55*/
    button.btn-success {
        padding: 10px;
        background-color: #6B7EC2; /* индиго цвет для кнопки */
        color: white;
        border: none;
        border-radius: 15px; /* Скругленные углы */
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease, box-shadow 0.3s ease; /* Анимация при наведении */
    }

    /* Подсветка кнопки при наведении */
    button.btn-success:hover {
        background-color: #218838; /* Темнее зеленый при наведении */
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Увеличение тени при наведении */
    }