/* Подключение шрифта */
@font-face {
    font-family: 'HelveticaNeueCyr Roman';
    src: url('../../fonts/helveticaneuecyr_roman.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}


/* Основной фон страницы */
body {
    background-color: #FFFFFF; /* Белый фон для всего body */
}

/* Стили для поисковой секции */
.search-section {
    background-color: #FFFFFF; /* Белый фон для всей секции поиска */
    margin-bottom: 0; /* Убираем отступ снизу */
    padding-bottom: 0; /* Убираем отступ снизу */
}

.search-container {
  background-color: #FFFFFF; /* Белый фон для контейнера поиска */
}

.search-input {
    background-color: #FAFAFA; /* Светло-серый только для поля ввода */
    /* остальные стили */
}

.breadcrumbs {
    padding: 20px 5% 20px 5%;
    padding-top: 40px; /* Отступ сверху внутри контейнера */
    margin-top: 0; /* Убираем внешний отступ */
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 14px;
    background-color: #FFFFFF; /* Белый фон */
}

.breadcrumbs a {
    color: #7A7A7A;
    text-decoration: none;
    transition: color 0.3s ease;
}

.breadcrumbs a:hover {
    color: #333F48;
}

.breadcrumbs span.current {
    color: #333F48;
}

.breadcrumbs .separator {
    margin: 0 5px;
    color: #7A7A7A;
}

/* Начало текста про политику */
.title_about {
    font-family: 'Roboto', sans-serif;
    font-size: 42px;
    color: #333F48;
    font-weight: bold; /* Жирный шрифт */
    margin-top: -20px; /* Поднимаем выше, чтобы убрать серую полосу */
    padding-top: 40px; /* Отступ внутри контейнера */
    text-align: left; 
    padding-left: 9%;
    margin-bottom: 50px;
    background-color: #FFFFFF; /* Белый фон */
}

/* Начало текста про политику */
.title_about_2 {
    font-family: 'Roboto', sans-serif;
    font-size: 42px;
    color: #333F48;
    font-weight: bold; /* Жирный шрифт */
    margin-top: -70px; /* Поднимаем выше, чтобы убрать серую полосу */
    padding-top: 100px; /* Еще больше увеличенный отступ сверху внутри контейнера */
    margin-bottom: 0; /* Убираем отступ снизу, чтобы не было серой полосы */
    text-align: left; 
    padding-left: 9%;
    background-color: #FFFFFF; /* Белый фон */
}

/* Начало текста про политику */
.title_about_3 {
    font-family: 'Roboto', sans-serif;
    font-size: 30px;
    color: #333F48;
    margin-top: 100px;
    margin-bottom: 0; /* Убираем отрицательный margin, чтобы не перекрывать футер */
    padding-bottom: 20px; /* Добавляем внутренний отступ снизу */
    text-align: left; 
    padding-left: 9%;
}



@media (max-width: 768px) {
    
    .general-terms,
    .policy-text,
    .policy-text_1,
    .policy-text_2,
    .divider-line,
    .divider-line_1 {
        margin-left: 20%; /* или 25%, подберите визуально */
        margin-right: 2%;
    }

    .privacy-policy-title {
        padding-left: 5%; /* переопределение для мобильных */
    }
    .square,
    .square_1,
    .square_duble {
        margin-left: 5%;
    }
}

@media (min-width: 1025px) and (max-width: 1680px) {
    .general-terms,
    .policy-text,
    .policy-text_1,
    .policy-text_2,
    .divider-line,
    .divider-line_1 {
        margin-left: 13%;
    }
}


/* Контейнер для картинки, на всю ширину экрана */
.brand-image {
    width: 100%; /* Растягиваем на всю ширину экрана */
    overflow: hidden; /* Убираем лишние элементы, которые могут выйти за пределы */
    background-color: #FFFFFF; /* Белый фон */
}

/* Картинка, растягивающаяся на всю ширину экрана */
.brand-image__full {
    width: 100%; /* Ширина картинки на 100% от родительского элемента */
    height: auto; /* Автоматическая высота, чтобы сохранить пропорции картинки */
    display: block; /* Убираем лишние отступы вокруг картинки */
}

/* Адаптивность под мобильные устройства */
@media (max-width: 768px) {
    .brand-image__full {
        width: 100%; /* Ширина картинки на 100% экрана для мобильных устройств */
        height: auto; /* Высота сохраняет пропорции */
    }
}

/* Добавьте это в ваш файл style.css */

/* Секция о бренде */
.brand-section {
    padding: 0 9%;
    padding-top: 40px; /* Отступ сверху внутри контейнера */
    margin-top: -50px; /* Поднимаем выше, чтобы убрать серую полосу */
    margin-bottom: 0; /* Убираем нижний отступ */
    background-color: #FFFFFF; /* Белый фон */
}

.brand-content {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    background-color: #FFFFFF; /* Белый фон */
}

.brand-block {
    flex: 1;
    min-width: 300px;
    background-color: #FFFFFF; /* Белый фон */
}

.mission-block {
    margin-left: 10%;
}

.brand-title {
    font-family: 'Roboto', sans-serif;
    font-size: 42px;
    color: #00A9CE;
    margin-bottom: 20px;
    font-weight: bold; /* Жирный шрифт для всех заголовков */
}

.brand-text {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333F48;
}

@media (min-width: 1280px) and (max-width: 1536px) {
    .brand-title,
    .motto-title {
        font-weight: 600 !important;
    }
}

/* Адаптивность для вертикальных планшетов - уменьшаем отступ слева у блока "НАША МИССИЯ" */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
    .mission-block {
        margin-left: 3% !important; /* Отступ 3% от левого края */
    }
    
    /* Уменьшаем размер шрифта у заголовков "НАША МИССИЯ" и "TIREI" */
    .brand-title {
        font-size: 32px !important; /* Уменьшаем размер шрифта */
    }
    
    /* Опускаем блок преимуществ вниз */
    .light-gray-block {
        margin-top: -50px !important; /* Опускаем блок еще ниже в 2 раза */
    }
    
    /* Уменьшаем шрифт для "КАЧЕСТВО И НАДЁЖНОСТЬ" */
    .title_about_2 {
        font-size: 32px !important; /* Уменьшаем размер шрифта */
    }
    
    /* Добавляем внутренний верхний отступ для заголовка "ПРЕИМУЩЕСТВА" */
    .title_about_3 {
        padding-top: 40px !important; /* Внутренний верхний отступ */
    }
    
    /* Увеличиваем верхний и уменьшаем нижний внутренний отступ у motto-container */
    .motto-container {
        padding-top: 60px !important; /* Увеличиваем верхний внутренний отступ */
        padding-bottom: 20px !important; /* Уменьшаем нижний внутренний отступ */
    }
    
    /* Сдвигаем картинку чуть левее */
    .family-image img {
        margin-left: 40px !important; /* Уменьшаем отступ слева, чтобы сдвинуть картинку влево */
    }
    
    /* Скрываем изображения в вертикальной версии планшета */
    .quality-image {
        display: none !important; /* Скрываем изображение angle.svg */
    }
    
    .angle-left-image {
        display: none !important; /* Скрываем изображение angle_2.svg */
    }
    
    /* Уменьшаем высоту футера в вертикальной версии планшета */
    .site-footer {
        padding-top: 10px !important; /* Уменьшаем верхний внутренний отступ */
        padding-bottom: 10px !important; /* Уменьшаем нижний внутренний отступ */
        min-height: auto !important; /* Убираем минимальную высоту */
    }
    
    .footer-inner {
        padding: 10px 15px !important; /* Уменьшаем внутренние отступы */
        gap: 15px !important; /* Уменьшаем расстояние между элементами */
    }
    
    /* Сдвигаем footer-bottom чуть левее */
    .footer-bottom {
        transform: translateX(5px) !important; /* Сдвигаем влево на 50px */
        position: relative !important;
    }
    
    /* Ограничиваем текст под картинками максимум 3 строками */
    .advantages-grid .advantage-text {
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.4 !important;
        max-height: calc(1.4em * 3) !important;
    }
}

/* Адаптивность */
@media (max-width: 768px) {
    .brand-section {
        padding: 0 5%;
    }
    
    .brand-content {
        flex-direction: column;
        gap: 20px;
    }
    
    .mission-block {
        margin-left: 0;
    }
    
    .brand-title {
        font-size: 32px;
    }
    
    /* Опускаем блок поиска чуть ниже в мобильной версии */
    .search-section {
        margin-top: 10px !important; /* Опускаем блок еще ниже */
    }
    
    /* Опускаем блок "КАЧЕСТВО И НАДЁЖНОСТЬ" ниже в мобильной версии */
    .title_about_2 {
        margin-top: -40px !important; /* Опускаем блок ниже (уменьшаем отрицательный отступ) */
        padding-top: 50px !important; /* Уменьшаем внутренний верхний отступ */
        padding-left: 5% !important; /* Отступ 3% от левого края */
    }
    
    /* Уменьшаем шрифт и внутренний верхний отступ у "ПРЕИМУЩЕСТВА" */
    .title_about_3 {
        font-size: 24px !important; /* Уменьшаем размер шрифта */
        margin-top: -110px !important; /* Поднимаем еще в 2 раза выше внутри блока */
        padding-top: 3px !important; /* Уменьшаем внутренний верхний отступ */
        padding-left: 5% !important; /* Отступ 5% от левой стороны */
    }
    
    /* Добавляем нижний внутренний отступ у текста "наш главный ориентир" */
    .quality-text {
        padding-bottom: 30px !important; /* Добавляем нижний внутренний отступ */
    }
    
    /* Уменьшаем шрифт у текста "TIREI СОЗДАЁТ ПРОДУКЦИЮ..." */
    .motto-title {
        font-size: 24px !important; /* Уменьшаем размер шрифта */
    }
    
    /* Поднимаем текст еще выше (уменьшаем верхний отступ) */
    .brand-motto {
        padding-top: 0 !important; /* Убираем верхний внутренний отступ */
        margin-top: -30px !important; /* Поднимаем текст еще выше */
    }
    
    /* Картинку делаем посередине и добавляем больше отступа снизу */
    .motto-container .family-image {
        margin-bottom: 30px !important; /* Добавляем больше отступа снизу */
    }
    
    .motto-container .family-image img {
        margin-left: auto !important; /* Центрируем картинку */
        margin-right: auto !important;
        display: block !important;
        margin-bottom: 30px !important; /* Добавляем больше отступа снизу */
    }
    
    /* Скрываем изображения в мобильной версии */
    .quality-image {
        display: none !important; /* Скрываем изображение angle.svg */
    }
    
    .angle-left-image {
        display: none !important; /* Скрываем изображение angle_2.svg */
    }
    
    /* Карточки преимуществ: центрируем с отступами по бокам */
    .advantages-grid {
        padding: 0 5% !important; /* Отступы по бокам от экрана */
        display: flex !important;
        justify-content: center !important; /* Центрируем карточки */
        align-items: center !important;
    }
    
    /* Опускаем карточки ниже только в мобильной вертикальной версии */
    @media (max-width: 768px) and (orientation: portrait) {
        .advantages-grid {
            margin-top: 200px !important; /* Опускаем карточки еще в 2 раза ниже в вертикальной мобильной версии */
        }
        
        /* Размер картинок 40% от контейнера */
        .advantages-grid .catalog-item.square.no-hover .advantage-img,
        .advantages-grid .catalog-item.square.no-hover .advantage-img-container {
            width: 40% !important;
            height: auto !important;
            max-width: 40% !important;
        }
        
        /* Размер картинки внутри контейнера для четвертой карточки */
        .advantages-grid .catalog-item.square.no-hover:nth-child(4) .advantage-img-container {
            width: 40% !important;
            height: auto !important;
            max-width: 40% !important;
            min-width: 0 !important;
            min-height: 0 !important;
        }
        
        .advantages-grid .catalog-item.square.no-hover:nth-child(4) .advantage-img-container .advantage-img {
            width: 100% !important;
            height: auto !important;
            max-width: 100% !important;
            min-width: 0 !important;
            min-height: 0 !important;
        }
        
        /* Размер шрифта под картинками 20px */
        .advantages-grid .catalog-item.square.no-hover .advantage-text {
            font-size: 20px !important;
        }
    }
    
    .advantages-grid .catalog-row {
        display: flex !important;
        justify-content: center !important; /* Центрируем ряд карточек */
        align-items: center !important;
        width: 100% !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
    }
    
    /* Увеличиваем размер карточек и центрируем, делаем квадратными */
    .advantages-grid .catalog-item.square {
        width: 300px !important; /* Еще больше увеличиваем ширину для квадрата */
        height: 300px !important; /* Еще больше увеличиваем высоту для квадрата */
        min-width: 333px !important;
        max-width: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
        margin: 0 auto !important; /* Центрируем карточки */
        aspect-ratio: 1 / 1 !important; /* Гарантируем квадратную форму */
    }
    
    /* Картинки внутри карточек по центру и больше */
    .advantages-grid .catalog-item.square.no-hover {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important; /* Центрируем по горизонтали */
        justify-content: center !important; /* Центрируем по вертикали */
    }
    
    .advantages-grid .advantage-img,
    .advantages-grid .advantage-img-container {
        margin-left: auto !important;
        margin-right: auto !important; /* Центрируем картинки */
        width: 100px !important; /* Еще больше увеличиваем размер картинок */
        height: 100px !important;
    }
    
    /* Текст по центру и больше */
    .advantages-grid .advantage-text {
        text-align: center !important; /* Центрируем текст */
        font-size: 16px !important; /* Еще больше увеличиваем размер шрифта */
        line-height: 1.4 !important;
    }
}

/* Горизонтальная мобильная версия - опускаем блок "КАЧЕСТВО И НАДЁЖНОСТЬ" ниже */
@media (max-width: 768px) and (orientation: landscape) {
    .title_about_2 {
        margin-top: 20px !important; /* Опускаем блок ниже (уменьшаем отрицательный отступ) */
    }
    
    /* Опускаем карточки преимуществ ниже в горизонтальной мобильной версии */
    .light-gray-block section.advantages-grid,
    section.advantages-grid,
    .advantages-grid {
        margin-top: 200px !important; /* Опускаем карточки ниже (немного подняли) */
        padding-top: 0 !important;
    }
}


/* Мобильная версия */
@media (max-width: 768px) {
    .title_about,
    .title_about_2
    .title_about_3 {
        padding-left: 5%;
    }

    .title_about_2 {
        margin-top: -60px;
    }

    .title_about_3 {
        margin-bottom: -200px;
    }
}

/* Стиль для текста под заголовком (такой же как brand-text) */
.quality-text {
    font-family: 'HelveticaNeueCyr Roman', Arial, sans-serif;
    font-size: 18px;
    line-height: 1.6;
    color: #333F48;
    padding-left: 9%;
    padding-top: 30px; /* Увеличиваем отступ сверху, чтобы текст был виден */
    padding-bottom: 20px; /* Уменьшенный отступ снизу */
    margin-top: 0; /* Убираем внешний отступ */
    margin-bottom: 0; /* Убираем внешний отступ снизу */
    background-color: #FFFFFF; /* Белый фон */
    position: relative; /* Для правильного позиционирования */
    z-index: 1; /* Чтобы текст был поверх других элементов */
}

/* Адаптивные стили для мобильных устройств */
@media (max-width: 768px) {
    .quality-text {
        padding-left: 5%;
        font-size: 16px;
        margin-bottom: 30px;
    }
}
.quality-image {
    flex: 1;
    min-width: 50%;
    text-align: right;
    margin-top: -60px; /* Поднимаем картинку выше (увеличиваем отрицательный отступ) */
    padding-top: 60px; /* Еще больше увеличиваем отступ сверху внутри контейнера */
    background-color: #FFFFFF; /* Белый фон */
}

.quality-image img {
    width: 55%;
    height: auto;
}

/* Адаптация для горизонтальных планшетов */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
    .quality-image {
        margin-top: -120px; /* Поднимаем картинку выше */
    }
}

/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
    .quality-section {
        padding: 0 5%;
    }
    
    .quality-content {
        flex-direction: column;
    }
    
    .quality-image {
        order: -1; /* Картинка будет выше текста на мобильных */
        text-align: center;
        margin-bottom: 30px;
    }
    
    .title_about_2 {
        font-size: 32px;
    }
}

/* Блок с серым фоном */
.light-gray-block {
    background-color: #FAFAFA;
    width: 100%;
    min-height: 1000px; /* Минимальная высота, можно изменить */
    margin-top: -200px; /* Возвращаем исходное значение для десктопов */
    padding-top: 40px; /* Отступ сверху внутри блока, чтобы опустить раздел ниже */
    padding-bottom: 0 !important; /* Убираем отступ снизу, чтобы не было пустого пространства */
    margin-bottom: 0 !important; /* Убираем отрицательный margin снизу */
    position: relative; /* Для правильного позиционирования */
    z-index: 0; /* Устанавливаем z-index */
}

/* Опускаем блок преимуществ на планшетах и ноутбуках */
@media (min-width: 768px) and (max-width: 1200px) {
    .light-gray-block {
        margin-top: -150px; /* Опускаем блок ниже на планшетах */
        padding-top: 20px !important; /* Минимальный внутренний верхний отступ */
    }
    
    /* Поднимаем заголовок "ПРЕИМУЩЕСТВА" выше внутри блока */
    .title_about_3 {
        margin-top: 20px !important; /* Уменьшаем отступ сверху для заголовка */
    }
    
    /* Поднимаем карточки выше на планшетах (вертикальных и горизонтальных) */
    .advantages-grid {
        margin-top: -20px !important; /* Поднимаем карточки выше, как у ноутов и десктопов */
    }
}

/* Убираем отступ снизу у картинки angle_2.svg на горизонтальных планшетах и убираем пустое пространство */
@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {
    .light-gray-block {
        padding-bottom: 0 !important; /* Убираем отступ снизу, чтобы не было пустого пространства */
    }
    
    .angle-left-image {
        margin-bottom: 0 !important; /* Убираем отступ снизу */
        padding-bottom: 0 !important; /* Убираем внутренний отступ снизу */
    }
    
    .angle-left-image img {
        margin-bottom: 0 !important; /* Убираем отступ снизу у изображения */
    }
    
    /* Опускаем только текст под четвертой картинкой, картинка остается на месте */
    .advantages-grid .catalog-item.square:nth-child(4) .advantage-text {
        position: relative !important;
        transform: translateY(25px) !important; /* Опускаем только текст ниже */
    }
    
    /* Ограничиваем текст под картинками максимум 3 строками */
    .advantages-grid .advantage-text {
        display: -webkit-box !important;
        -webkit-line-clamp: 3 !important;
        line-clamp: 3 !important;
        -webkit-box-orient: vertical !important;
        overflow: hidden !important;
        line-height: 1.4 !important;
        max-height: calc(1.4em * 3) !important;
    }
}

/* Поднимаем блок преимуществ чуть выше на ноутбуках */
@media (min-width: 1200px) and (max-width: 1680px) {
    .light-gray-block {
        margin-top: -170px !important; /* Поднимаем блок чуть выше на ноутбуках */
        padding-top: 20px !important; /* Минимальный внутренний верхний отступ */
    }
    
    /* Поднимаем заголовок "ПРЕИМУЩЕСТВА" выше внутри блока */
    .title_about_3 {
        margin-top: 20px !important; /* Уменьшаем отступ сверху для заголовка */
    }
    
    /* Поднимаем карточки немного выше на ноутбуках */
    .advantages-grid {
        margin-top: -20px !important; /* Опускаем карточки чуть ниже */
    }
    
    /* Убираем отступ снизу у картинки angle_2.svg на ноутбуках и убираем пустое пространство */
    .light-gray-block {
        padding-bottom: 0 !important; /* Убираем отступ снизу, чтобы не было пустого пространства */
    }
    
    .angle-left-image {
        margin-bottom: 0 !important; /* Убираем отступ снизу */
        padding-bottom: 0 !important; /* Убираем внутренний отступ снизу */
    }
    
    .angle-left-image img {
        margin-bottom: 0 !important; /* Убираем отступ снизу у изображения */
    }
}

/* Поднимаем карточки немного выше на десктопах */
@media (min-width: 1680px) {
    .advantages-grid {
        margin-top: -20px !important; /* Опускаем карточки чуть ниже на десктопах */
    }
    
    /* Убираем отступ снизу у картинки angle_2.svg на десктопах и убираем пустое пространство */
    .light-gray-block {
        padding-bottom: 0 !important; /* Убираем отступ снизу, чтобы не было пустого пространства */
    }
    
    .angle-left-image {
        margin-bottom: 0 !important; /* Убираем отступ снизу */
        padding-bottom: 0 !important; /* Убираем внутренний отступ снизу */
    }
    
    .angle-left-image img {
        margin-bottom: 0 !important; /* Убираем отступ снизу у изображения */
    }
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .light-gray-block {
        margin-top: 80px;
    }
}

/* Добавляем немного пространства в мобильной вертикальной версии */
@media (max-width: 768px) and (orientation: portrait) {
    .light-gray-block {
        padding-bottom: 30px !important; /* Добавляем немного пространства снизу */
    }
}

/* Новый контейнер для расположения в строку */
.motto-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 9%;
    margin-top: -30px;
}

/* Текстовая часть */
.brand-motto {
    flex: 1;
    padding-right: 40px;
    margin-top: 0; /* Убираем предыдущий отступ */
    text-align: left;
}

/* Картинка */
.family-image {
    flex: 1;
    text-align: right;
}

.family-image img {
    width: 100%;
    height: auto;
    max-height: 600px;
    margin-left: 85px;
}

/* Адаптация для планшетов - поднимаем раздел выше и уменьшаем отступы */
@media (min-width: 768px) and (max-width: 1200px) {
    .motto-container {
        margin-top: -120px; /* Поднимаем раздел еще выше */
        padding-top: 5px; /* Минимальный внутренний отступ сверху */
    }
    
    /* Уменьшаем шрифт для "КАЧЕСТВО И НАДЁЖНОСТЬ" на планшетах */
    .title_about_2 {
        font-size: 36px !important; /* Уменьшаем размер шрифта */
    }
    
    /* Уменьшаем шрифт для motto-title на планшетах */
    .motto-title {
        font-size: 28px !important; /* Уменьшаем размер шрифта */
    }
}

/* Адаптация для ноутбуков - уменьшаем шрифт для motto-title */
@media (min-width: 1200px) and (max-width: 1680px) {
    /* Уменьшаем шрифт для motto-title на ноутбуках */
    .motto-title {
        font-size: 36px !important; /* Уменьшаем размер шрифта */
    }
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .motto-container {
        flex-direction: column;
        padding: 0 5%;
    }
    
    .brand-motto {
        padding-right: 0;
        margin-bottom: 30px;
    }
    
    .family-image {
        text-align: center;
    }
}

.angle-left-image img {
    width: 50%; 
}