/* ===== ОСНОВНОЙ ФОН И ТЕКСТ ===== */
.body {
    background-color: #FAF8F5;        /* основной фон */
    color: #4D403A;                   /* единый цвет текста */
    font-family: 'Playfair Display';  /* единый шрифт */
    margin: 0;
    padding: 0;
}


/* ===== ВЕРХНЯЯ ПАНЕЛЬ ===== */
.top-bar {
    width: 100%;            /* строка на всю ширину экрана */
    padding: 15px 30px;     /* чуть больше высота */
    display: flex;
    align-items: center;    /* вертикальное выравнивание по центру */
    justify-content: space-between;
    background-color: #FAF8F5;
    color: #4D403A;         /* один цвет текста */
    font-size: 16px;        /* общий шрифт немного больше */
    box-sizing: border-box;
}

/* Левая часть */
.top-left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;                /* занимает доступное место слева */
}

.logo {
    height: 80px;           /* немного больше герб */
    width: auto;
}

.top-bar-text {
    font-size: 16px;        /* такой же, как номер телефона */
    white-space: nowrap;    /* текст в одну строку */
}

/* Центр: Skio */
.skio-logo {
    height: 140px;          /* нужная высота */
    width: auto;
    position: absolute;     /* чтобы прижать к верхнему краю и по центру */
    top: 0;                 /* прижать к верхней линии */
    left: 50%;              /* центр по горизонтали */
    transform: translateX(-50%); /* сдвигаем на половину ширины картинки */
}


/* Правая часть */
.right-text {
    text-align: right;
    color: #4D403A;
}

.text-large { font-size: 20px; }
.text-small { font-size: 14px; }

/* ===== МЕНЮ ===== */
.header {
    background-color: #DFDACF; /* мягкий оттенок под сайт */
    margin-top: 10px;
}

.nav {
    max-width: 1200px;
    margin: 0 auto;
}

.nav-ul {
    list-style: none;
    display: flex;
    justify-content: center;
    gap: 40px;
    margin: 0;
    padding: 14px 0;
}

.nav-ul li a {
    text-decoration: none;
    font-size: 26px;
    font-weight: 600;
    color: #4D403A;
    position: relative;
    transition: color 0.3s;
}

.nav-ul li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: #A3968D;
    transition: width 0.3s;
}

.nav-ul li a:hover {
    color: #A3968D;
}

.nav-ul li a:hover::after {
    width: 100%;
}


/* Стили для основной картинки */
.main-image-wrapper {
    padding: 0 3cm;           /* отступы такие же, как у сетки */
    box-sizing: border-box;
    margin: 20px auto;        /* сверху и снизу отступ */
}

.main-image-wrapper {
    padding: 0 3cm;            /* отступы такие же, как у сетки */
    box-sizing: border-box;
    margin: 20px auto;         /* сверху и снизу отступ */
    border-radius: 16px;       /* закругляем углы контейнера */
    overflow: hidden;          /* обрезаем края, чтобы картинка была в пределах рамки */
    height: 6cm;               /* высота блока */
}

.main-image-wrapper {
    padding: 0 3cm;        /* отступы слева и справа */
    box-sizing: border-box;
    margin: 20px auto;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;           /* высота зависит от картинки */
}

.main-image {
    width: 100%;            /* растягиваем по ширине */
    height: auto;           /* сохраняем пропорции, картинка не обрезается */
    display: block;
    border-radius: 16px;    /* закругленные края */
}

@media (max-width: 650px) {
    .main-image-wrapper {
        padding: 0 10px;
    }

    .main-image {
        width: 100%;
        height: auto;
    }
}


/* Стили для текста справа */
.right-text {
    margin: 0;
    padding-right: 0cm;
    font-weight: normal;
    color: #4D403A;
    position: absolute;
    top: 0.5cm;
    right: 1cm;
}

/* Для маленького текста */
.text-small { font-size: 16px; color: #4D403A; }

/* Для большого текста */
.text-large { font-size: 22px; color: #4D403A; }

/* вторая строка сверху - меню */
.header {
    background-color: #DFDACF;        /* фон меню */
    padding: 20px;
}


/* нижняя строка */
.footer {
    background-color: #FAF8F5;         /* фон нижней строки */
    color: #4D403A;                    /* единый цвет текста */
    text-align: center;
    padding: 10px 0;
    width: 100%;
    max-width: 100%;
    margin: 2cm auto 0 auto;
}
.footer a {
    color: #4D403A;       /* цвет как у текста */
}

/* Основное содержимое */
.main { padding: 30px; color: #4D403A; } 
.main p {
    font-size: 50px;      /* размер шрифта */
    line-height: 1.3;     /* межстрочный интервал */
    color: #4D403A;       /* цвет текста */
    margin-bottom: 16px;  /* отступ между абзацами */
}

/* ===== БЛОК УСЛУГ ===== */
.services {
    text-align: left;
    margin: 60px auto;
}

/* Заголовок "Услуги" над разделом */
.services-title {
    position: relative;
    margin-left: 50px;      /* слово остаётся там же */
    font-size: 28px;
    font-weight: bold;
    color: #4D403A;
    display: inline-block;
    padding: 10px 20px;
    animation: fadeUp 0.9s ease-out forwards;
}

/* Прямоугольная заливка слева */
.services-title::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50px;            /* тянем фон к левому краю */
    width: calc(100% + 50px);
    height: 100%;

background: rgba(223, 218, 207, 0.6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    border-radius: 0 12px 12px 0;

    z-index: -1;
}
/* Анимация появления */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Сетка карточек ===== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 0 3cm;
    box-sizing: border-box;
    width: 100%;
}

/* ===== Карточка услуги ===== */
.service-card {
    position: relative;
    width: 100%;
    height: 7cm;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(12px);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Картинка на карточке */
.service-card img.service-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 16px;
}

/* Текст на карточке */
.service-card span {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 1;
    color: #4D403A;
    font-size: 18px;
    font-weight: bold;
    text-align: left;
}
/* Hover — подъём + мягкое свечение */
.service-card:hover {
    transform: translateY(-6px) scale(1.03);
    box-shadow: 0 15px 35px rgba(0,0,0,0.25), 0 0 20px rgba(0,128,128,0.3);
}


/* Контейнер для блоков карта контакты */
/* Общий блок с темным фоном */
.contact-blocks-wrapper {
    background-color: #DFDACF;   /* как верхнее меню */
    padding: 40px;               /* внутренние отступы сверху/снизу */
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);

    /* ограничиваем ширину с отступами 3см слева и справа */
    width: 100%;
    max-width: calc(1300px - 0cm); 
    margin: 40px auto;           /* центрирование */
    box-sizing: border-box;      /* чтобы padding учитывался внутри */
}

/* Внутренний контейнер — карта + контакты */
.contact-blocks {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 70px;           /* расстояние между блоками */
}
/* Правый блок — контакты */
.contact-card {
    background: rgba(250, 248, 245, 0.8);   /* мягкий фон */
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.15);
    width: 500px;        /* такой же размер, как карта */
    height: 300px;       /* такой же размер, как карта */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.1);         /* тонкая рамка */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* плавный hover */
    cursor: pointer;      /* чтобы курсор показывался как рука */
    font-size: 24px;   /* увеличиваем размер шрифта */
    font-weight: 500; /* делаем текст не жирным */
}
.contact-table {
    width: 100%;           /* таблица на всю ширину карточки */
    border-collapse: collapse;
}
.contact-table tr {
    height: 60px; /* расстояние между строками */
}
.contact-table .label {
    font-weight: 600;     /* жирный текст для названия */
    padding-right: 10px;   /* небольшой отступ от значения */
    white-space: nowrap;   /* слово не переносится */
    text-align: left;      /* выравнивание по левому краю */
    width: 30%;            /* можно подкорректировать ширину колонки */
}

.contact-table .value {
    text-align: right;     /* значения выравнены по правому краю */
    word-break: break-word;/* длинные строки переносятся */
    width: 70%;            /* оставшаяся ширина */
}
.contact-card {
    padding: 15px; /* отступ текста от краёв карточки */
    box-sizing: border-box; /* чтобы padding учитывался в ширине карточки */
}
/* Карта внутри общего блока */
.contact-map {
    width: 500px;
    height: 300px;
    border-radius: 16px;
    object-fit: cover;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);    /* мягкая тень */
    border: 1px solid rgba(0,0,0,0.1);         /* тонкая рамка */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* плавность */
    cursor: pointer;
}

/* Hover-эффект */
.contact-blocks > :hover {
    transform: translateY(-6px) scale(1.03);                        /* увеличиваем на 5% */
    box-shadow: 0 15px 35px rgba(0,0,0,0.25), 0 0 20px rgba(0,128,128,0.3);     /* усиливаем тень */
}

/* текст в услугах  */

.service-description p,
.service-description li {
    font-size: 22px;   
    line-height: 1.3;
}

/* Первая строка — жирная */
.service-intro {
    font-weight: 600;
}

/* Остальной текст — обычный */
.service-text {
    font-weight: normal;
}
.service-description ul {
    margin-top: 10px;      /* отступ сверху от текста */
    margin-bottom: 10px;   /* отступ снизу */
    padding-left: 20px;    /* аккуратный отступ слева */
}

.service-description li {
    margin-bottom: 6px;    /* расстояние между пунктами */
}
.intro-text {
    font-size: 16px;              /* размер шрифта как у текста истории */
    line-height: 1.35;            /* высота строки */
    color: #4D403A;               /* коричневый цвет текста */
    text-align: justify;           /* ровный правый край */
    text-justify: inter-word;     /* распределение пробелов */
    margin-bottom: 18px;          /* отступ снизу */
    font-family: 'Playfair Display'; /* можно указать шрифт для единообразия */
}
/* Обертка для текста с рамкой */
.service-description .intro-text {
    background: rgba(250, 248, 245, 0.85); /* прозрачный фон */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    max-width: 100%; /* можно оставить авто или задать ширину */
    margin: 20px 0;  /* отступ сверху/снизу */
    padding: 20px 30px; /* внутренние отступы */

    border-radius: 16px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.1);

    box-sizing: border-box;
}
@media (max-width: 650px) {
    .service-description .intro-text {
        font-size: 18px !important;
        line-height: 1.2 !important;
        padding: 14px 16px !important;
        margin: 12px 0 !important;
        word-spacing: -1px; /* уменьшает расстояние между словами */
    }
}

/* Кнопка "Отправить заявку" в форме */
/* Основной стиль рабочей кнопки модалки */
.service-btn {
    position: relative;        /* для ::before */
    display: inline-block;
    font-size: 28px;           /* как заголовок */
    font-weight: bold;
    color: #4D403A;            /* текст */
    padding: 10px 20px;
    cursor: pointer;
    background: none;          /* фон через ::before */
    border: none;
    margin-top: 20px;
    animation: fadeUp 0.9s ease-out forwards;
}

/* Прямоугольная заливка слева */
.service-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -50px;               /* расширяем слева */
    width: calc(100% + 50px);
    height: 100%;
    background: #f2d9a0; 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
    border-radius: 0 12px 12px 0;
    z-index: -1;
}
.service-btn:hover::before {
    background: rgba(255, 255, 255, 0.5); /* более яркий/контрастный */
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.25); /* усиленный эффект тени */
    transition: 0.3s ease; /* плавное появление */
}

.service-btn {
    transition: color 0.3s ease; /* плавное изменение цвета текста */
}

.service-btn:hover {
    color: #2c1f12; /* можно чуть темнее текст при наведении */
}


/* --- Модал --- */
/* Модалка — фон затемнения */
.modal {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4); /* полупрозрачный фон */
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#modal-toggle:checked + .service-btn + .modal {
    display: block;
    opacity: 1;
}

/* Контент модалки */
.modal-content {
    background: rgba(250, 248, 245, 0.85);            /* бежевый фон */
    border-radius: 16px;             /* скругление */
    box-shadow: 0 15px 50px rgba(0,0,0,0.25);
    width: 90%;
    max-width: 420px;
    margin: 8% auto;
    padding: 25px;
    position: relative;
    font-family: inherit;
    font-size: 22px;
    color: #4D403A;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform: translateY(-20px);
}

#modal-toggle:checked + .service-btn + .modal .modal-content {
    transform: translateY(0);
}

/* Крестик закрытия */
.modal-close {
    position: absolute;
    right: 12px;
    top: 8px;
    font-size: 28px;
    cursor: pointer;
    color: #4D403A;
    transition: 0.2s ease;
}

.modal-close:hover {
    color: #FAF8F5;
    transform: scale(1.1);
}

/* Поля ввода */
.modal-content input,
.modal-content textarea {
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: none;
    border-radius: 12px;
    background: #FAF8F5;
    color: #4D403A;
    font-size: 20px;
    outline: none;
    transition: background 0.2s ease, box-shadow 0.2s ease;
    font-family: inherit;
}

.modal-content input:focus,
.modal-content textarea:focus {
    background: rgba(223, 218, 207, 0.6);
    box-shadow: 0 0 8px rgba(223,218,207,0.6);
}

/* ===================== */
/* Кнопка внутри модалки */
.modal-content .service-btn {
    background: rgba(223, 218, 207, 0.6) !important;      /* фон как у модалки */
    border-radius: 16px !important;      /* скругление */
    color: #4D403A !important;           /* текст */
    font-family: inherit !important;     
    font-size: 20px !important;
    padding: 12px 25px !important;
    border: none !important;
    cursor: pointer !important;
    display: inline-block !important;
    margin-top: 10px !important;
}

/* Отключаем ::before только для кнопки внутри модалки */
.modal-content .service-btn::before {
    display: none !important;
}

/* Подсветка при наведении */
.modal-content .service-btn:hover {
    background: #EFEBD9 !important;       /* чуть светлее при наведении */
    color: #2c1f12 !important;            /* текст темнее */
}

/* согласие на обработку */
.policy-line {
    margin-top: 6px;
    font-size: 18px;
    line-height: 1.45;
}

/* Лейбл = вся строка кликабельна */
.policy-checkbox {
    display: flex;
    align-items: flex-start;   /* ВАЖНО: по первой строке */
    gap: 10px;
    cursor: pointer;
}

/* Скрываем дефолт */
.policy-checkbox input {
    position: absolute;
    opacity: 0;
}

/* Квадрат */
.policy-checkbox .box {
    min-width: 18px;
    height: 18px;
    border-radius: 4px;
    background: #4D403A;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    position: relative;
    margin-top: 3px; /* микро-доводка под текст */
}

/* Галочка */
.policy-checkbox .box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #FAF8F5;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    transition: 0.15s ease;
}

/* Активное состояние */
.policy-checkbox input:checked + .box::after {
    transform: rotate(45deg) scale(1);
}

/* Текст */
.policy-text {
    text-align: justify;
    line-height: 1; 
}

/* Ссылка */
.policy-text a {
    color: #4D403A;
    text-decoration: underline;
}

.policy-text a:hover {
    color: #2c1f12;
}

/* ===== куки ===== */
#cookie-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 320px;
    background: rgba(223, 218, 207, 0.7);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 14px;
    padding: 15px 20px;
    display: none; /* изначально скрыт, покажет JS */
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    z-index: 9999;
    font-size: 16px;
    color: #4D403A;
    font-family: inherit;
}

.cookie-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.cookie-content span {
    text-align: justify;
}

.cookie-content a {
    color: #4D403A;
    text-decoration: underline;
}

.cookie-content a:hover {
    color: #2c1f12;
}

#cookie-accept {
    border: none;
    background: #4D403A;
    color: #FAF8F5;
    padding: 8px 16px;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    transition: 0.2s ease;
    white-space: nowrap;
}

#cookie-accept:hover {
    background: #2c1f12;
}



/* ===== ОСНОВНОЙ СТИЛЬ ПРОЕКТОВ ===== */
.projects-css {
    max-width: 1400px;
    margin: 40px auto;
    padding: 0 3cm; /* отступы слева и справа ~3см */
    font-family: 'Playfair Display', serif; /* твой шрифт */
    color: #4d403a; /* твой цвет */
}

/* Скрываем радиокнопки */
.projects-css input[type="radio"] {
    display: none;
}

/* Стили табов */
.projects-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 1px;
    margin-bottom: 20px;
}

/* ===== СТИЛЬ ДЛЯ ТАБОВ ПРОЕКТОВ ===== */
.projects-tabs label {
    padding: 10px 12px;
    background: rgba(223, 218, 207, 0.6);  /* светлый прямоугольник, как у услуг */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;                   /* закругление, как у карточек */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); /* мягкая тень */
    font-family: 'Playfair Display', serif; /* твой шрифт */
    color: #4d403a;                         /* твой цвет текста */
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s, color 0.3s, transform 0.3s;
    text-align: center;
    min-width: 50px;
}

/* Hover эффект */
.projects-tabs label:hover {
    background: rgba(223, 218, 207, 0.8);
    transform: translateY(-2px);
}

/* Активная вкладка */
#project1:checked ~ .projects-tabs label[for="project1"],
#project2:checked ~ .projects-tabs label[for="project2"],
#project3:checked ~ .projects-tabs label[for="project3"],
#project4:checked ~ .projects-tabs label[for="project4"],
#project5:checked ~ .projects-tabs label[for="project5"],
#project6:checked ~ .projects-tabs label[for="project6"],
#project7:checked ~ .projects-tabs label[for="project7"] {
    background: #4d403a;
    color: #fff;
}
/* ===== ВНЕШНИЙ ВИД ПРОЕКТОВ КАК DIRECTOR-BLOCK ===== */
.projects-split {
    background: rgba(250, 248, 245, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    max-width: 1200px;
    margin: 40px auto;
    padding: 30px 40px;

    display: flex;
    align-items: center;
    gap: 40px;

    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.1);

    box-sizing: border-box;
}

/* Текст слева */
.projects-text {
    font-size: 20px;
    line-height: 1.35;
    color: #4D403A;
    text-align: justify;
}

/* Картинка справа */
.projects-images {
    flex-shrink: 0;
}

.projects-images img {
    width: 300px;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

/* Адаптив */
@media (max-width: 650px) {
    .projects-split {
        flex-direction: column;
    }

    .projects-images img {
        width: 100%;
        max-width: 400px;
    }
}
/* Мобильная версия для табов */
@media (max-width: 650px) {
    .projects-tabs {
        flex-direction: column;
        gap: 12px;
        align-items: stretch;
    }
    .projects-tabs label {
        font-size: 16px;
        min-width: auto;
        width: 100%;
    }
}

/* Скрываем все проекты по умолчанию */
.project-content {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
    margin-bottom: 60px;
}

/* Показываем выбранный проект */
#project1:checked ~ #content1,
#project2:checked ~ #content2,
#project3:checked ~ #content3,
#project4:checked ~ #content4,
#project5:checked ~ #content5,
#project6:checked ~ #content6,
#project7:checked ~ #content7 {
    display: flex;
    opacity: 1;
    gap: 40px;
    align-items: flex-start;
    flex-wrap: wrap;
}

/* Сетка проекта: текст слева, картинка справа */
.projects-split {
    display: flex;
    gap: 40px;
    width: 100%;
}

/* Левая колонка — текст */
.projects-text {
    flex: 1 1 50%;
    min-width: 300px;
}

.projects-text h2 {
    font-size: 2em;
    margin-bottom: 15px;
}

.projects-text p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 10px;
}

/* Правая колонка — изображение */
.projects-images {
    flex: 1 1 50%;
    min-width: 300px;
}

.projects-images img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
/* --- Адаптив для планшетов --- */
@media (max-width: 1024px) {
    .projects-split {
        flex-direction: column;
        gap: 20px; /* чуть меньше, чем на десктопе */
    }

    .projects-text,
    .projects-images {
        flex: 1 1 100%;
    }
}

/* --- Адаптив для мобильных --- */
@media (max-width: 600px) {
    .projects-split {
        flex-direction: column;
        gap: 15px; /* минимальные отступы */
    }

    .projects-text h2 {
        font-size: 1.3em; /* немного меньше заголовок */
    }

    .projects-text p {
        font-size: 0.95em; /* чуть меньше текста */
        line-height: 1.4;
    }

    .projects-images img {
        width: 100%;
        height: auto;
        border-radius: 6px; /* чуть меньший радиус */
        box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    }
}
/* Адаптив для мобильных — показываем все проекты и скрываем табы */
@media (max-width: 600px) {
    /* Скрываем табы */
    .projects-tabs {
        display: none;
    }

    /* Показываем все проекты по умолчанию */
    .project-content {
        display: flex !important; /* показываем все блоки */
        flex-direction: column;   /* проекты один под другим */
        gap: 30px;
        width: 100%;
        margin: 0;
        padding: 0;
        opacity: 1 !important;    /* чтобы не было скрытых */
    }

    /* Контейнер каждого проекта */
    .projects-split {
        display: flex;
        flex-direction: column;  /* текст над картинкой */
        width: 100%;
        max-width: none;         /* отключаем ограничение по ширине */
        margin: 0 auto;
        gap: 15px;
        align-items: center;     /* центрируем контент */
        box-sizing: border-box;
        padding: 0 15px;         /* небольшой внутренний отступ */
    }

    /* Текст и картинка на всю ширину */
    .projects-text,
    .projects-images {
        width: 100%;
    }

    /* Картинка на всю ширину */
    .projects-images img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 6px;
    }
}
 @media (max-width: 600px) {
    .project-content {
        width: 100%;
        max-width: 100%;
        margin: 0 auto;
        padding: 0 15px;   /* аккуратные отступы */
        align-items: stretch;
        justify-content: flex-start;
        box-sizing: border-box;
    }

    .projects-split {
        width: 100%;
        margin: 0;
        box-sizing: border-box;
    }
}


/* ===== О КОРПОРАЦИИ / ИСТОРИЯ ===== */
.corporation-history {
    background: rgba(250, 248, 245, 0.85); /* как контакты */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    max-width: 1200px;
    margin: 40px auto;        /* центрируем */
    padding: 40px 50px;       /* внутренние отступы */

    border-radius: 16px;      /* как у контактов */
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.1);

    box-sizing: border-box;
}

/* Заголовок "История" */
.corporation-history h2 {
    font-size: 22px;
    margin-bottom: 25px;
    color: #4D403A;
}

/* Текст */
.corporation-history p {
    font-size: 20px;
    line-height: 1.35;
    margin-bottom: 18px;
    color: #4D403A;
    text-align: justify;  /* ровный правый край */
    text-justify: inter-word; /* красивое распределение пробелов */
}

/* ===== БЛОК ГЕНЕРАЛЬНЫЙ ДИРЕКТОР ===== */
.director-block {
    background: rgba(250, 248, 245, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    max-width: 1200px;
    margin: 40px auto;
    padding: 30px 40px;

    display: flex;
    align-items: center;
    gap: 40px;

    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.1);

    box-sizing: border-box;
}

/* Текст слева */
.director-text {
    flex: 1;
    font-size: 20px;
    line-height: 1.35;
    color: #4D403A;
    text-align: justify;
    margin: 0;
}

/* Картинка справа */
.director-image {
    width: 300px;          /* ФИКСИРОВАННЫЙ размер */
    height: auto;          /* не обрезается */
    object-fit: contain;   /* на всякий случай */
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.2);
    flex-shrink: 0;        /* не сжимается */
}

/* экспертизы */
 /* экспертизы (контейнер) */
.expertiza {
    display: flex;
    gap: 30px;

    max-width: 1200px;
    margin: 40px auto;
}

/* карточки */
.card {
    flex: 1;

    background: rgba(250, 248, 245, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);

    padding: 40px 50px;

    border-radius: 16px;

    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border: 1px solid rgba(0,0,0,0.1);

    box-sizing: border-box;
}

/* Заголовок */
.card h2 {
    font-size: 22px;
    margin-bottom: 25px;
    color: #4D403A;
    text-align: center; /* <-- центрируем заголовок */
}

/* Текст */
.card p {
    font-size: 24px;
    line-height: 1.35;
    margin-bottom: 18px;
    color: #4D403A;
    text-align: justify;
    text-justify: inter-word;
}

/* вложенные карточки */
.sub-card {
    background: rgba(255, 255, 255, 0.7);
    padding: 1px 10px;
    margin-bottom: 10px;
    border-radius: 12px;
    border: 1px solid rgba(0,0,0,0.1);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* Текст подэкспертиз */
.sub-card p {
    font-size: 20px;
    line-height: 1.35;
    color: #4D403A;

    display: flex;
    justify-content: space-between;
    text-align: left;
    gap: 40px;
}
@media (max-width: 650px) {

    /* контейнер */
    .expertiza {
        flex-direction: column;
        gap: 16px; /* меньше расстояние между карточками */
        margin: 20px auto;
    }

    /* большая карточка */
    .card {
        padding: 20px 16px; /* было 40/50 — сильно уменьшаем */
        border-radius: 12px;
    }

    /* заголовок */
    .card h2 {
        font-size: 18px;
        margin-bottom: 16px;
    }

    /* основной текст */
    .card p {
        font-size: 16px;
        line-height: 1.4;
        text-align: left; /* убираем justify */
    }

    /* маленькие карточки */
    .sub-card {
        padding: 8px 10px;
        margin-bottom: 8px;
        border-radius: 10px;
    }

    /* текст внутри маленьких карточек */
    .sub-card p {
        font-size: 18px;
        line-height: 1.3;
        gap: 10px;
        flex-direction: column; /* убираем растягивание */
    }
}



}
/* ===== МОБИЛЬНАЯ АДАПТИВА ===== */
@media (max-width: 650px) {

  /* История корпорации */
  .corporation-history {
    padding: 25px 20px;
    margin: 20px 15px;
  }

  .corporation-history h2 {
    font-size: 20px;
    margin-bottom: 20px;
  }

  .corporation-history p {
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 14px;
  }

  /* Блок генерального директора */
  .director-block {
    flex-direction: column;   /* картинка под текстом */
    align-items: flex-start;  /* выравнивание по левому краю */
    padding: 20px 15px;
    gap: 20px;
  }

  .director-text {
    font-size: 16px;
    line-height: 1.5;
    text-align: justify;         /* на мобильных обычно левое выравнивание */
  }

  .director-image {
    width: 100%;              /* картинка занимает всю ширину блока */
    max-width: 300px;         /* но не больше оригинала */
    height: auto;
  }
}
/* ===== Контейнер с PDF ===== */
.pdf-section {
    display: flex;
    gap: 5px;               /* Промежутки между PDF */
    padding: 15px;
    overflow-x: auto;        /* Горизонтальный скролл на маленьких экранах */
    justify-content: space-between;
}

/* ===== Контейнер с PDF ===== */
.pdf-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 столбца */
    gap: 20px;                             /* Отступы между PDF */
    justify-content: center;               /* Центрируем сетку */
    justify-items: center;                 /* Центрируем каждый элемент внутри колонки */
    padding: 15px;
    grid-auto-rows: auto;                  /* Автоматическая высота рядов */
}

/* ===== Каждый PDF элемент ===== */
.pdf-item {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s, z-index 0.3s;
    min-width: 200px;
}

/* ===== Эффект увеличения при наведении ===== */
.pdf-item:hover {
    transform: scale(1.1);
    z-index: 30;
}

/* ===== Предпросмотр PDF ===== */
.pdf-item embed {
    width: 450px;
    height: 450px;              /* Вертикально вытянутый блок */
    border: #4D403A;  /* Цвет рамки */
    border-radius: 30px;        /* Закруглённые углы */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s, height 0.3s, border-color 0.3s;
}

/* ===== Название под PDF ===== */
.pdf-title {
    margin-top: 8px;
    font-weight: bold;
    font-size: 16px;
}

/* ===== Адаптивные размеры ===== */

/* Планшеты */
@media (max-width: 1024px) {
    .pdf-section {
        grid-template-columns: repeat(2, 1fr); /* 2 колонки */
    }
    .pdf-item embed {
        height: 450px;
    }
}

/* Мобильные */
@media (max-width: 650px) {
    .pdf-section {
        grid-template-columns: 1fr;           /* 1 колонка */
        gap: 15px;
    }
    .pdf-item embed {
        height: 450px;
    }
}


/* ===== АДАПТИВ ===== */
@media (max-width: 650px) {
    .projects-split {
        flex-direction: column;
    }
    .projects-text,
    .projects-images {
        flex: 1 1 100%;
    }
    .projects-text h2 {
        font-size: 1.5em;
    }
}
/* =========================
   ФИНАЛЬНАЯ МОБИЛЬНАЯ ВЕРСИЯ — ОБНОВЛЕННАЯ
   ========================= */
@media (max-width: 650px) {

    html, body {
        max-width: 100%;
        overflow-x: hidden;
        background: #FAF8F5;
    }

    /* ===== ПЕРВАЯ СТРОКА ===== */
    .top-bar {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: flex-start; /* запрет растягивания по высоте */
        padding: 10px 12px;
        gap: 10px;
        width: 100%;
        box-sizing: border-box;
    }

    .top-left {
        display: flex;
        align-items: flex-start; /* чтобы текст не растягивался */
        gap: 8px;
        max-width: 65%;
    }

    .logo {
        height: 46px;
        flex-shrink: 0;
    }

    .top-bar-text {
        font-size: 10px;
        line-height: 1.2;
        white-space: normal;
        word-break: break-word;
        flex-shrink: 1; /* текст уменьшается при нехватке места */
    }

    .right-text {
        max-width: 35%;
        text-align: right;
        font-size: 12px;
        line-height: 1.2;
        white-space: normal;
        word-break: break-word;
        flex-shrink: 1; /* текст уменьшается */
    }

    .text-large { font-size: 10px; font-weight: 600; }
    .text-small { font-size: 8px; }

    /* ===== ВТОРАЯ СТРОКА — СКИО ===== */
    .skio-logo {
        display: block;
        margin: 100px auto 0; /* отступ сверху, чтобы опустить под первую строку */
        height: 140px;
        max-width: 90%;
    }

    /* ===== УБИРАЕМ ОСНОВНУЮ КАРТИНКУ ===== */
    .main-image-wrapper { display: none !important; }

    /* ===== МЕНЮ ===== */
    .header { padding: 8px 0; }
    .nav-ul {
        flex-direction: column;
        gap: 10px;
        padding: 10px 0;
    }
    .nav-ul li a {
        font-size: 18px;
        text-align: center;
    }

    /* ===== УСЛУГИ ===== */
    .services-title {
        margin: 20px 16px 10px;
        font-size: 22px;
    }

    .services-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
        padding: 0 16px;
    }

    .service-card {
        height: 140px;
        border-radius: 14px;
    }

    .service-card span {
        font-size: 16px;
        top: 12px;
        left: 12px;
        right: 12px;
    }

    .service-card img.service-image {
        opacity: 0.35;
    }

/* ===== Мобильная отдельная строка для скио ===== */
.top-bar + .skio-logo {
    display: block;       /* чтобы заняла отдельную строку */
    margin: 12px auto;    /* отступ сверху и снизу, по центру */
    height: 80px;         /* размер как тебе нужно */
    max-width: 90%;       /* чтобы не вылазило за экран */
}
.header::before {
        content: "";
        display: block;
        height: 150px;  /* высота строки для скио */
        width: 100%;
        background-color: #FAF8F5; /* вот тут ставишь цвет */
    }
    
    /* Адаптив  контакты*/
@media (max-width: 650px) {
    .contact-blocks {
        flex-direction: column;
        gap: 20px;
        align-items: center;
    }

    .contact-card, .contact-map {
        width: 100%;
        height: auto;
    }
   .contact-card, 
.contact-card * {
    font-size: clamp(16px, 2vw, 18px) !important;
}
}
    /* Адаптив  проекты сами*/
@media (max-width: 650px) {
    /* Основной контейнер проекта */
    .project-content {
        display: flex !important;
        flex-direction: column;
        gap: 20px;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        box-sizing: border-box;
    }

    /* Блок с разделением текст/изображения */
    .projects-split {
        position: relative;          /* важно для безопасного смещения */
        left: 50%;                   /* двигаем блок к центру окна */
        right: 50%;
        margin-left: -50vw;          /* растягиваем влево */
        margin-right: -50vw;         /* растягиваем вправо */
        width: 100vw;                /* ширина равна ширине экрана */
        padding: 0 15px;             /* внутренние отступы */
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
    }

    /* Текст и изображения внутри */
    .projects-text,
    .projects-images {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Изображения */
    .projects-images img {
        width: 100% !important;
        height: auto;
        display: block;              /* убираем лишние пробелы снизу */
    }
    .service-description .intro-text {
    font-size: 1.2em;
    line-height: 1.4;
}
}
/* Мобильная адаптация модалки */
@media (max-width: 650px) {
    .modal-content {
        width: 90%;          /* чуть меньше ширины экрана */
        max-width: 320px;    /* уменьшаем максимально допустимую ширину */
        margin: 12% auto;    /* чуть больше отступ сверху */
        padding: 15px;       /* компактный padding */
        font-size: 18px;     /* немного меньше текст */
        transform: translateY(-10px); /* анимация чуть мягче */
    }

    /* Поля ввода */
    .modal-content input,
    .modal-content textarea {
        padding: 8px;
        font-size: 16px;
        border-radius: 8px;
    }

    /* Кнопка внутри модалки */
    .modal-content .service-btn {
        font-size: 16px !important;
        padding: 8px 18px !important;
        border-radius: 10px !important;
    }
}
<style>
/* Контейнер от края до края */
.expertise-extra-blocks {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Расстояние между рядами */
  width: 100%;
  margin-top: 20px; /* Отступ от текста выше */
}

/* Ряды по 2 блока */
.expertise-row {
  display: flex;
  gap: 20px; /* Расстояние между блоками */
}

/* Блоки в стиле раздела */
.expertise-block {
  flex: 1; /* Блоки одинаковой ширины */
  background-color: #f5f5f5; /* Под цвет существующих блоков */
  border-radius: 12px; /* Закругления как у других */
  padding: 20px; /* Внутренние отступы */
  text-align: center; /* Центр текста */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* Если у текущих блоков есть тень */
  font-size: 16px; /* Шрифт как у раздела */
  color: #333; /* Цвет текста */
}
</style>