/* Базовые стили */
:root {
    --primary-text-color: white;
    --secondary-text-color: rgba(102, 102, 102, 1);
    --shadow-default: 0 2px 4px rgba(0, 0, 0, 0.4); 
    --shadow-text: 0 2px 4px rgba(0, 0, 0, 0.1);
    --font-size-large: 35px;
    --font-size-medium: 21px;
    --font-size-small: 18px;
}

body, html {
    block-size: 100%;
    margin: 0;
}

/* Фоновое изображение */
.background-image {
    position: fixed;
    inset-block-start: 0;
    inset-inline-start: 0;
    inline-size: 100%;
    block-size: 100%;
    background: url('../../images/books/Books-optimized.jpg') center/cover fixed;
    z-index: -1;
}

/* Основные контейнеры */
.transparent-content {
    display: flex;
    justify-content: center;
    align-items: center;
    block-size: 80vh;
    background-color: rgba(0, 0, 0, 0.5);
    padding: 20px;
    z-index: 1;
    position: relative;
}

.booksTransparent-content {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-text-color);
    inline-size: 100%;
    block-size: 780px;
    padding-block-start: 25px;
    z-index: 1;
    position: relative;
}

/* Текстовые стили */
.booksBlock_1 {
    h1, h2, h3 {
        font-size: 39.66px;
        color: var(--primary-text-color);
        font-weight: normal; /* убрана жирность */
        margin-block-end: 20px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
        text-align: left;
        white-space: pre-line;
    }

    p {
        color: var(--primary-text-color);
        font-size: 14.5pt;
        margin: -5px;
        font-weight: 400;
        text-align: left;
        white-space: pre-line;
        line-height: 1.2; 
        text-shadow: var(--shadow-text);
    }
}

.booksBlock_2 {
    background-color: rgba(255, 255, 255, 1);
    margin: 0px auto;
    display: flex;
    align-items: center;
    height: auto;
    min-height: auto;

        h1, h2, h3 {
        text-align: center;
        font-size: 45px;
        font-weight: normal !important;
        margin-block-end: 10px;
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        white-space: pre-line;
        line-height: 0.95; 
        color: var(--secondary-text-color);
        }
}

.booksBlock_2_2 {
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding-block-start: 25px;
    inline-size: 100%;
    block-size: 800px;

    h1, h2, h3 {
        font-weight: bold;
        font-size: var(--font-size-large);
        margin-block-end: 25px;
        text-shadow: 2px 2px 2px rgba(102, 102, 102, 0.3);
        line-height: 0.6;
        white-space: pre-line;
    }

    p {
        font-size: var(--font-size-small);
        line-height: 1.3;
        white-space: pre-line;
    }
}

.booksBlock_2 .col-10 {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Десктопная версия для row booksBlock_2 */
.row.booksBlock_2 {
    display: flex;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    height: auto;
    min-height: auto;
}

/* Десктопные стили для колонок в booksBlock_2 */
.row.booksBlock_2 .col-1 {
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
    padding-right: 15px;
    padding-left: 15px;
}

.row.booksBlock_2 .col-10 {
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
    padding-right: 15px;
    padding-left: 15px;
    height: auto;
    min-height: auto;
}

/* Десктопные стили для booksBlock_2_2 */
.booksBlock_2_2 {
    display: flex;
    justify-content: center;
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
    padding-block-start: 25px;
    padding-block-end: 25px;
    height: auto;
    min-height: auto;
}

.booksBlock_2_2 .col-2 {
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
    padding-right: 15px;
    padding-left: 15px;
    height: auto;
    min-height: auto;
}



.booksBlock_3 {
        h1, h2, h3 {
            font-size: 50px;
            color: var(--primary-text-color);
            font-weight: normal;
            margin-block-end: 5px;
            text-shadow: var(--shadow-default);
            text-align: left;
            white-space: pre-line;
        }
}


.booksBlock_3_1  {
    color: var(--primary-text-color);
   p {
       color: var(--primary-text-color);
       text-align: start;
       font-weight: 600;
       font-size: 12.5pt;
       line-height: 1; /* Уменьшаем line-height */
       margin-bottom: 20px; /* Убираем отступ снизу */
       text-shadow: var(--shadow-text);
   }
    /* Стили для десктопной версии */
    @media (min-width: 769px) {
        span {
            color: var(--primary-text-color);
            font-weight: normal;
            font-size: 12.5pt;
            margin-block-end: 1px;
        }
    }
    
    /* Стили для мобильной версии */
    @media (max-width: 768px) {
    span {
        color: var(--primary-text-color);
        font-weight: normal;
            font-size: 10.5pt !important;
        margin-block-end: 1px;
        }
    }
    
    @media (max-width: 480px) {
        span {
            color: var(--primary-text-color);
            font-weight: normal;
            font-size: 10.5pt !important;
            margin-block-end: 1px;
        }
    }

}
.booksBlock_4{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
}

.booksBlock_4_1{
    margin-block-end: 15px;
    h1, h2, h3 {
        font-weight: normal;
        font-size: 45px;
        margin-block-start: 65px;
        text-shadow: 2px 2px 2px rgba(102, 102, 102, 0.3);
        line-height: 1;
        white-space: pre-line;
        text-align: center;
    }

    p {
        font-size: 16.5pt;
        line-height: 0.95;
        white-space: pre-line;
        
    }
}

.booksBlock_4_2{
    margin-bottom: 0;
    p {
        color: var(--secondary-text-color);
        text-align: start;
        font-weight: 600;
        font-size: 12.5pt;
        line-height: 1; /* Уменьшаем line-height */
        margin-bottom: 10px; /* Убираем отступ снизу */
        text-shadow: var(--shadow-text);
    }
    /* Стили для десктопной версии */
    @media (min-width: 769px) {
        p strong {
            font-size: 14.5pt;
            font-weight: bold;
        }
    }
    
    /* Стили для мобильной версии */
    @media (max-width: 768px) {
        p strong {
            font-size: 10.5pt !important;
            font-weight: bold;
        }
        
        .booksBlock_4_2 p strong {
            font-size: 10.5pt !important;
        }
    }
    
    @media (max-width: 480px) {
        p strong {
            font-size: 10.5pt !important;
            font-weight: bold;
        }
        
        .booksBlock_4_2 p strong {
            font-size: 10.5pt !important;
        }
    }
     /* Стили для десктопной версии */
     @media (min-width: 769px) {
         span {
             color: var(--secondary-text-color);
             font-weight: normal;
             font-size: 14.5pt;
             margin-block-end: 1px;
             text-shadow: none;
         }
     }
     
     /* Стили для мобильной версии */
     @media (max-width: 768px) {
         span {
             color: var(--secondary-text-color);
             font-weight: normal;
             font-size: 10.5pt !important;
             margin-block-end: 1px;
             text-shadow: none;
         }
     }
     
     @media (max-width: 480px) {
     span {
         color: var(--secondary-text-color);
         font-weight: normal;
             font-size: 10.5pt !important;
         margin-block-end: 1px;
             text-shadow: none;
         }
     }
}


.booksBlock_4_2_content {
    padding-left: 50px;
    padding-right: 50px;
}

.booksBlock_5 {
    height: auto;
    min-height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.9);
    text-align: center;
    border-bottom: 1px solid rgb(255, 255, 255);
    padding-top: 30px;
    

    h1, h2, h3 {
        font-weight: 400;
        font-size: 45px;
        margin-block-end: -5px;
        color: var(--secondary-text-color);
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        white-space: pre-line;
        line-height: 0.95;
    }

    p {
        font-size: 16pt;
        line-height: 1.1;
        color: var(--secondary-text-color);
        white-space: pre-line;
    }
}

/* Текстовые классы */



.booksText4 {
    color: var(--secondary-text-color);
}

.booksBlock_7 {
    background-color: rgba(255, 255, 255, 0.9);
    height: 50px;
}

/* Стили для текстов преимуществ */
.booksWeight, h3.booksWeight {
    font-size: 14.5pt;
    font-weight: bold;
    text-align: center;
    line-height: 1.2;
    text-shadow: none;
}

/* Стили для заголовков до тире в блоках преимуществ */
.booksBlock_3_1 p strong {
    font-size: 14.5pt;
    font-weight: bold;
    color: white;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Стили для ссылок в блоке books */
.books-link {
    color: var(--secondary-text-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

.books-link:hover {
    color: rgb(51, 55, 140);
    text-decoration: none;
}

/* Мобильные стили */
@media (max-width: 768px) {
    /* Основные контейнеры */
    .transparent-content {
        block-size: auto !important;
        min-height: 60vh;
        padding: 20px 15px;
    }
    
    /* Все блоки с текстом - внутренние отступы */
    .booksBlock_1,
    .booksBlock_2,
    .booksBlock_3,
    .booksBlock_4,
    .booksBlock_5,
    .booksTransparent-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Убираем row свойства у booksBlock_2 */
    .row.booksBlock_2 {
        display: block !important;
        margin: 0 !important;
        flex-wrap: nowrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Скрываем колонки в booksBlock_2 кроме col-10 booksBlock_2_1 */
    .booksBlock_2 .col-1 {
        display: none !important;
    }
    
    .booksBlock_2 .col-10.booksBlock_2_1 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    .booksTransparent-content {
        block-size: auto;
        padding: 20px 15px;
    }
    
    /* Заголовки */
    .booksBlock_1 h1, h2, h3 {
        font-size: 39.66px !important;
        margin-block-end: 15px;
        text-align: center;
        text-transform: uppercase !important;
    }
    
    /* Блок с заголовком "Юбилейные книги" */
    .booksBlock_1 {
        padding: 20px 0 20px 0 !important;
    }
    
    .booksBlock_2_1 h1, h2, h3 {
        font-size: 24px !important;
        line-height: 1 !important;
        margin-block-end: 15px;
    }
    
    .booksBlock_2_1 {
        position: static !important;
        z-index: auto !important;
    }
    
    .booksBlock_3 h1, h2, h3 {
        font-size: 26px;
        margin-block-end: 15px;
        text-align: center;
    }
    
    .booksBlock_4_1 h1, h2, h3 {
        font-size: 19pt !important;
        margin-block-start: 30px;
        margin-block-end: 15px;
    }
    
    .booksBlock_5 h2.desktop-title {
        display: none;
    }
    
    .booksBlock_5 h2.mobile-title {
        display: block;
        white-space: pre-line;
    }
    
    .booksBlock_5 p {
        font-size: 12pt !important;
    }
    
    .booksBlock_5 p .books-link {
        font-size: 12pt !important;
        line-height: 1.3 !important;
        display: inline !important;
        vertical-align: baseline !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .col-12.booksBlock_4_1 {
        margin-top: 30px;
    }
    
    .col-12.booksBlock_4_1 h2 {
        margin-top: 0;
        margin-block-start: 0;
    }
    
    .booksBlock_5 h1, h2, h3 {
        font-size: 24px;
        margin-block-end: 15px;
    }
    
    /* Тексты */
    .booksBlock_1 p {
        font-size: 10.5pt;
        line-height: 1.4;
        text-align: center;
        margin-bottom: 15px !important;
    }
    
    .booksBlock_2_2 {
        flex-direction: column;
        align-items: center;
        padding: 20px 10px;
        display: block !important;
        margin: 0 !important;
        flex-wrap: nowrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    .booksBlock_2_2 .col-2 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: 15px;
    }
    
    .booksWeight, h3.booksWeight {
        font-size: 10.5pt !important;
        font-weight: normal !important;
        line-height: 1.3;
        margin-bottom: 10px;
        text-transform: none !important;
        position: relative;
        padding-left: 25px;
        text-align: left !important;
    }
    
    .booksWeight::before, h3.booksWeight::before {
        content: "✓";
        color: #28a745;
        font-weight: bold;
        font-size: 16px;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .booksBlock_3_1 p {
        font-size: 11pt;
        line-height: 1.4;
        margin-bottom: 15px;
    }
    
    .booksBlock_3_1 p strong {
        font-size: 13pt;
    }
    
.booksBlock_4_1 p {
    font-size: 13pt;
    line-height: 1.3;
    text-align: center;
    white-space: pre-line;
}
    
    .booksBlock_4_1 p {
        font-size: 0;
    }
    
    .booksBlock_4_1 p::before {
        content: "Мы предоставляем полный спектр \Aуслуг по созданию юбилейных книг – от \Aразработки концепции до готового \Aпечатного издания.";
        font-size: 13pt;
        white-space: pre-line;
        display: block;
    }
    
    /* Стили для booksBlock_4_2 в мобильной версии */
    .booksBlock_4_2 .col-3 {
        display: none !important;
    }
    
    .booksBlock_4_2 .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    .booksBlock_4_2 p {
        font-size: 11pt;
        line-height: 1.3;
        margin-bottom: 12px;
    }
    
    .booksBlock_5 p {
        font-size: 13pt;
        line-height: 1.3;
        text-align: center;
    }
    
    /* Блоки преимуществ */
    .booksBlock_3_1 {
        padding: 15px;
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    /* booksBlock_3_1 как col-12 на мобильных */
    .col-6.booksBlock_3_1 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        text-align: left !important;
    }
    
    .booksBlock_3_1 p {
        text-align: left !important;
    }
    
    /* Скрываем другие колонки в booksTransparent-content на мобильных */
    .booksTransparent-content .col-1,
    .booksTransparent-content .col-4 {
        display: none !important;
    }
    
    .booksBlock_4_2 {
        padding: 15px 10px;
    }
    
    /* Ссылки */
    .books-link {
        font-size: 13pt;
    }
    
    /* Отступы */
    .booksBlock_2 {
        margin-bottom: 20px;
    }
    
    .booksBlock_3 {
        margin-bottom: 20px;
    }
    
    .booksBlock_4 {
        margin-bottom: 20px;
    }
    
    .booksBlock_5 {
        height: auto;
        padding: 30px 15px;
    }
}

/* Дополнительные стили для очень маленьких экранов */
@media (max-width: 480px) {
    .booksBlock_1 h1, h2, h3 {
        font-size: 39.66px !important;
        text-transform: uppercase !important;
    }
    
    .booksBlock_1 {
        padding: 20px 0 20px 0 !important;
    }
    
    /* Все блоки с текстом - внутренние отступы для маленьких экранов */
    .booksBlock_1,
    .booksBlock_2,
    .booksBlock_3,
    .booksBlock_4,
    .booksBlock_5,
    .booksTransparent-content {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    /* Убираем row свойства у booksBlock_2 для маленьких экранов */
    .row.booksBlock_2 {
        display: block !important;
        margin: 0 !important;
        flex-wrap: nowrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* Скрываем колонки в booksBlock_2 кроме col-10 booksBlock_2_1 для маленьких экранов */
    .booksBlock_2 .col-1 {
        display: none !important;
    }
    
    .booksBlock_2 .col-10.booksBlock_2_1 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    /* Одна колонка для booksBlock_2_2 на маленьких экранах */
    .booksBlock_2_2 .col-2 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        margin-bottom: 15px;
    }
    
    .booksBlock_2_2 {
        display: block !important;
        margin: 0 !important;
        flex-wrap: nowrap !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    
    /* col-6 booksBlock_3_1 как col-12 на маленьких экранах */
    .booksBlock_3_1 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    .col-6.booksBlock_3_1 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
        text-align: left !important;
    }
    
    .booksBlock_3_1 p {
        text-align: left !important;
    }
    
    /* Скрываем другие колонки в booksTransparent-content на мобильных */
    .booksTransparent-content .col-1,
    .booksTransparent-content .col-4 {
        display: none !important;
    }
    
    .booksBlock_2_1 h1, h2, h3 {
        font-size: 24px !important;
        line-height: 1 !important;
    }
    
    .booksBlock_2_1 {
        position: static !important;
        z-index: auto !important;
    }
    
    .booksBlock_3 h1, h2, h3 {
        font-size: 22px;
    }
    
    .booksBlock_4_1 h1, h2, h3 {
        font-size: 19pt !important;
    }
    
    .booksBlock_5 p {
        font-size: 12pt !important;
    }
    
    .booksBlock_5 p .books-link {
        font-size: 12pt !important;
        line-height: 1.3 !important;
        display: inline !important;
        vertical-align: baseline !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    
    .col-12.booksBlock_4_1 {
        margin-top: 30px;
    }
    
    .col-12.booksBlock_4_1 h2 {
        margin-top: 0;
        margin-block-start: 0;
    }
    
    .booksBlock_5 h1, h2, h3 {
        font-size: 20px;
    }
    
    .booksBlock_1 p {
        font-size: 10.5pt;
    }
    
    .booksWeight, h3.booksWeight {
        font-size: 10.5pt !important;
        font-weight: normal !important;
        text-transform: none !important;
        position: relative;
        padding-left: 25px;
        text-align: left !important;
    }
    
    .booksWeight::before, h3.booksWeight::before {
        content: "✓";
        color: #28a745;
        font-weight: bold;
        font-size: 16px;
        position: absolute;
        left: 0;
        top: 0;
    }
    
    .booksBlock_3_1 p {
        font-size: 10pt;
    }
    
    .booksBlock_3_1 p strong {
        font-size: 12pt;
    }
    
    .booksBlock_4_1 p {
        font-size: 12pt;
    }
    
    .booksBlock_4_1 p {
        font-size: 0;
    }
    
    .booksBlock_4_1 p::before {
        content: "Мы предоставляем полный спектр \Aуслуг по созданию юбилейных книг – от \Aразработки концепции до готового \Aпечатного издания.";
        font-size: 12pt;
        white-space: pre-line;
        display: block;
    }
    
    /* Стили для booksBlock_4_2 в мобильной версии */
    .booksBlock_4_2 .col-3 {
        display: none !important;
    }
    
    .booksBlock_4_2 .col-6 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    
    
    .booksBlock_5 p {
        font-size: 12pt;
    }
    
    
    .transparent-content {
        block-size: 50vh;
        padding: 10px;
    }
    
    .booksTransparent-content {
        padding: 15px 10px;
    }
    
    .booksBlock_1 p {
        white-space: pre-line;
    }
    
    .booksBlock_5 p {
        white-space: pre-line;
    }
    
    .booksBlock_5 p {
        white-space: normal;
    }
}

/* Стили для десктопной версии */
@media (min-width: 769px) {
    .booksBlock_4_2_content p {
        line-height: 1.2;
    }
    
    .booksBlock_5 h2.desktop-title {
        display: block;
        white-space: pre-line;
        margin-bottom: 10px;
    }
    
    .booksBlock_5 h2.mobile-title {
        display: none;
    }
    
    .booksBlock_1 p {
        white-space: normal;
    }
    
    .booksBlock_5 p::before {
        display: none;
    }
    
    .booksBlock_5 p {
        display: block;
        white-space: pre-line;
    }
    
    .booksBlock_5 p::after {
        content: "\A\A";
        white-space: pre-line;
    }
}