/* Специфичные стили для фонового изображения на странице brochures.html */

/* Фоновое изображение для мобильной версии */
@media (max-width: 768px) {
    /* Переопределяем существующий background-image элемент для мобильной версии */
    .background-image {
        background: url('../images/slayder/1-2/broshuryPhoto-post-2-optimized.webp?v=20250920d') center center/cover fixed !important;
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: -10 !important;
    }
    
    /* Fallback для браузеров без поддержки WebP */
    .no-webp .background-image {
        background: url('../images/slayder/1-2/broshuryPhoto-post-2-optimized.jpg?v=20250920d') center center/cover fixed !important;
        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }
    
    /* Убеждаемся, что контент поверх фона */
    main,
    .container-fluid,
    .row,
    .transparent-content,
    .transparent-content2 {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Убираем белый оверлей который делает изображение матовым */
    .background-image::before {
        display: none !important;
        content: none !important;
    }
}

/* Десктопная версия остается без фонового изображения */
@media (min-width: 769px) {
    body {
        background-image: none;
        background-color: #ffffff;
    }
    
    body::before {
        display: none;
    }
}