*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Raleway',-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
}

.container{
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    position: relative;
}

.main-header {
  background-color: #fff; /* Оставим пока белой, но добавим тень */
  padding: 15px 0; /* 15px сверху/снизу, 0 по бокам (боковые отступы у нас в .container) */
  border-bottom: 1px solid #eaeaea; /* Тонкая серая линия для отделения от контента */
  position: sticky; /* Включаем "липкий" режим */
  top: 0;           /* Прилипаем к самому верху экрана */
  z-index: 100;     /* Гарантируем, что шапка будет поверх другого контента */
}
.main-header .container {
  display: flex; /* Включаем Flexbox! */
  justify-content: space-between; /* Главная магия: раскидывает элементы по краям */
  align-items: center; /* Выравнивает элементы по вертикали (по центру) */
}
.main-header .logo {
  font-size: 22px;
  font-weight: 700; /* 700 - это жирное начертание (bold) */
  color: #333;
  text-decoration: none; /* Убираем подчеркивание */
}


/* === НАВИГАЦИЯ В ШАПКЕ === */
.main-nav ul {
    display: flex; /* Выстраиваем пункты меню в ряд */
    list-style: none; /* Убираем маркеры списка */
    gap: 25px; /* Расстояние между пунктами */
}

.main-nav a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
    transition: color 0.2s ease;
}

.main-nav a:hover {
    color: #F2C200; 
}

.main-nav .main-site-link-btn {
  display: inline-block; /* Нужно, чтобы применились отступы padding */
  background: linear-gradient(to right, #758191, #404F60);
  background-size: 200% 100%; /* Градиент растянут в 2 раза */
  background-position: left; /* Начинаем слева */
  transition: background-position 0.35s ease-in-out;
  color: #fff; /* Белый текст */
  padding: 8px 16px; /* Внутренние отступы, чтобы кнопка не была плоской */
  border-radius: 5px; /* Скругляем углы */
  text-decoration: none; /* Убираем подчеркивание */
}

.cta .main-site-link-btn{
    color: #fff;
    text-decoration: none;
}

.cta .main-site-link-btn:hover{
    color: #dfdfdf;
}

/* === СТИЛИ ДЛЯ КНОПКИ-БУРГЕРА === */

.burger-menu{
    display: none;
    position: relative;
    width: 30px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 110;
}

.burger-menu span,.burger-menu::before,.burger-menu::after {
    /* Обязательно для псевдоэлементов, чтобы они появились */
    content: ''; 
    
    /* Позиционируем их абсолютно, внутри .burger-menu */
    position: absolute;
    left: 0;

    /* Задаем размеры и цвет полосок */
    width: 100%;
    height: 2px;
    background-color: #333;
}

.burger-menu::before {
    top: 0; /* Верхняя полоска - прижимаем к верху */
}

.burger-menu span {
    top: 50%; /* Центральная - ровно по центру */
    transform: translateY(-50%); /* Небольшая коррекция, чтобы центр был точным */
}

.burger-menu::after {
    bottom: 0; /* Нижняя полоска - прижимаем к низу */
}   

.product-link {
  font-weight: 700;  
  color: #333;
  text-decoration: none; /* Убираем подчеркивание */
}
.product-link:hover{
    color: #F2C200
}
.main-nav .main-site-link-btn:hover{
    background-position: right;
    color:#fff
}
.hero{
    background-color: #f8f9fa;
    padding: 80px 0;
    text-align: center;
}
.hero h1{
    font-size: 42px;
    margin-bottom:20px ;
    line-height: 1.2;
}
.hero p{
    font-size: 18px;
    margin: 0 auto; 
    max-width: 600px;
    color: #6c757d;
}    
.bolts, .screws, .self-tapping-screws, .nuts, .coating, .joints {
    padding: 50px 0;
    scroll-margin-top: 70px;
}
.bolts, .self-tapping-screws, .coating {
    background-color: #f8f9fa;/* Чередуем фон у секций для лучшего визуального разделения */
}
.product-item {
    display: flex;
    align-items: center; /* Выравниваем по вертикали, если высота картинки и текста разная */
    gap: 30px;           /* Современный способ задать отступ между flex-элементами */
}
.product-image {
    flex: 0 0 45%; /* Задаем базовый размер блока с картинкой в 45% */

}
.product-image img {
    width: 100%;       /* Картинка будет занимать всю ширину родителя (.product-image) */
    display: block;    /* Убирает небольшой отступ снизу, который браузеры добавляют картинкам */
}
.product-description h3 {
    margin-bottom: 15px;
    font-size: 25px;
    font-weight: 700;
}
.product-description p{
    line-height: 1.8;
}
.product-description h4{
    margin: 7px 0px;
    font-weight: 500;
    font-size: 18px;
}
.product-description ul{
    list-style-position: inside;
    list-style-type: square;
}
div h2{
    font-size: 32px;
}
/* Модификатор для смены порядка элементов */
.product-item--reverse {
    flex-direction: row-reverse;
}
/* === СЕКЦИЯ ПРИЗЫВА К ДЕЙСТВИЮ (CTA) === */
.cta {
    background-color: #526175; /* Темный, контрастный фон */
    color: #ffffffee;               /* Белый текст для читаемости */
    padding: 80px 0;
    text-align: center;         /* Центрируем весь текст внутри */
}

.cta h2 {
    font-size: 36px;
    margin-bottom: 15px;
}

.cta p {
    font-size: 18px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    color: rgba(255, 255, 255, 0.8); /* Слегка прозрачный белый для подзаголовка */
}

/* Модификатор для большой кнопки */
.btn--large {
    padding: 15px 30px;
    font-size: 20px;
    font-weight: 700;
}

/* === ПОДВАЛ === */
.main-footer {
    background-color: #f8f9fa; /* Такой же, как у чередующихся секций */
    padding: 40px 0;
    border-top: 1px solid #eaeaea;
    color: #6c757d; /* Приглушенный цвет текста */
    text-align: center;
    font-size: 14px;
}

.main-footer p {
    margin-bottom: 10px;
}

.main-footer p:last-child {
    margin-bottom: 0; /* Убираем нижний отступ у последнего параграфа */
}

/* === СЕКЦИЯ ПОКРЫТИЙ === */
.section-description {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 40px;
    font-size: 18px;
    color: #6c757d;
    padding-top: 20px;
}
/* Общий контейнер для списка покрытий */
.coatings-list {
    max-width: 100%; 
    margin: 30px auto 0; /* Отступы сверху и центрирование по горизонтали */
    border: 1px solid #eaeaea;
    border-radius: 8px;
    background-color: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* Каждый отдельный ряд в списке */
.coating-item {
    display: flex;
    align-items: center; /* Выравниваем все три колонки по вертикали */
    gap: 30px; /* Отступ между колонками */
    padding: 20px 25px; /* Внутренние отступы */
    border-bottom: 1px solid #eaeaea; /* Разделительная линия */
}

/* Убираем линию у последнего элемента, чтобы она не висела снизу */
.coatings-list .coating-item:last-child {
    border-bottom: none;
}

/* Стили для колонок */
.coating-item__name {
    flex: 0 0 17%; /* Колонка с названием: не растет, не сжимается, базовая ширина 17% */
}

.coating-item__description {
    flex: 1 1 auto; /* Колонка с описанием: самая гибкая, будет занимать все оставшееся место */
}

.coating-item__image {
    flex: 0 0 200px; /* Колонка с картинкой: фиксированная ширина 200px */
    text-align: center;
}

.coating-item__image img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: 5px;
}
.is-mirrored{
    transform: scaleX(-1);
}

.coating-item__name h3 {
    font-size: 20px;
}
/* Соединения */

.joints-list{
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* две колонки одинаковой ширины */
    gap: 40px; /* отступы между блоками */
    max-width: 95%;
    margin: 20px auto 0;
    background-color: #90a2b9;
    border-radius: 8px;
    padding: 25px;  
}

.joints-item{
    display: flex;
    gap: 10px;
    padding: 15px;
    flex-direction: column;
    background-color:#f8f9fa ;
    border-radius: 8px;
}

.joints-item h3 { /* Обращаемся напрямую к h3 */
    text-align: center;
    margin-bottom: 15px; /* Отступ снизу */
}

.joints-item p {
    margin-bottom: 15px; /* Отступ снизу для каждого параграфа */
}

.joints-item p:last-of-type {
    margin-bottom: 20px; /* У последнего параграфа делаем отступ побольше перед картинкой */
}

.joints-scheme {
    margin: auto;
    display: flex;
    justify-content: center; /* Центрирование по горизонтали */
    align-items: center;
}

.joints-scheme img {
    max-width: 80%; /* Картинка не будет шире карточки */
    height: auto;
    display: block;
    border-radius: 5px;
}


/* === АДАПТИВНЫЕ СТИЛИ (MEDIA QUERIES) === */

/* Применяем стили, когда ширина экрана 768px или меньше */
@media (max-width: 768px) {

    /* --- Адаптация секции с покрытиями --- */
    .coating-item {
        flex-direction: column; /* Ставим элементы в колонку, друг под другом */
        align-items: flex-start; /* Выравниваем по левому краю, а не по центру */
        gap: 15px; /* Уменьшаем отступ между элементами */
    }

    .coating-item__name,
    .coating-item__description,
    .coating-item__image {
        /* Сбрасываем flex-свойства, чтобы они не мешали */
        flex: none; 
        width: 100%; /* Растягиваем каждый блок на всю ширину родителя */
    }

    .coating-item__image {
        max-width: 150px; /* Ограничиваем максимальную ширину картинки, чтобы не была гигантской */
        margin: auto ;
        margin-top: 10px;
        
    }

    .joints-list {
        grid-template-columns: 1fr; /* одна колонка на мобильных */
    }

    .joints-scheme{
        max-width: 300px;
        margin: auto ;
        margin-top: 10px;
    }
  
}

/* === АДАПТАЦИЯ ШАПКИ === */
@media (max-width: 992px) {
    
    /* 1. Прячем обычную навигацию и кнопку */
    .main-nav,
    .main-header .main-site-link-btn {
        display: none;
    }

    /* 2. Показываем кнопку-бургер */
    .burger-menu {
        display: block;
    }

    /* 3. Стили для открытого меню */
    .main-nav.is-open {
        display: flex; /* Используем flex для центрирования */
        flex-direction: column;
        justify-content: center;
        align-items: center;

        position: fixed; /* Перекрывает весь контент */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(5px); /* Красивый эффект размытия фона */
        z-index: 105;
    }

    /* 4. Стили для ссылок внутри открытого меню */
    .main-nav.is-open ul {
        flex-direction: column;
        gap: 30px;
    }

    .main-nav.is-open a {
        font-size: 24px;
    }

    .burger-menu.is-open .burger-menu__line {
    transform: scale(0);
    }

    .burger-menu.is-open::before {
        transform: rotate(45deg);
        top: 50%;
        margin-top: -1px;
    }

    .burger-menu.is-open::after {
        transform: rotate(-45deg);
        top: 50%;
        margin-top: -1px;
    }

    .main-nav.is-open .main-site-link-btn {
        display: inline-block; /* Возвращаем ей блочное поведение */
        margin-top: 40px;      /* Большой отступ сверху, чтобы отделить от ссылок */
        padding: 12px 24px;    /* Делаем ее немного крупнее */
        font-size: 18px;       /* Устанавливаем размер шрифта */
    }
    
    .main-nav.is-open .main-site-link-btn {
    position: static; /* <-- ВОТ ОНО! Возвращаем кнопку в обычный поток */
    transform: none;  /* Сбрасываем сдвиг */
    
    display: inline-block; 
    margin-top: 40px;      
    padding: 12px 24px;    
    font-size: 18px;       
}
}


/* Стили для ШАПКИ на больших экранах */
@media (min-width: 993px) {
    .main-header .container {
        /* Мы уже используем flex, это отлично */
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .main-nav {
        /* Заставляем навигацию занять все доступное место между лого и кнопкой */
        flex-grow: 1;   
    }  
    .main-nav ul {
        /* Центрируем сам список внутри этого пространства */
        justify-content: center;
    }
    
     .main-nav .main-site-link-btn {
        position: absolute;
        right: 15px; /* Прижимаем к правому краю контейнера */
        top: 50%;
        transform: translateY(-50%); /* Вертикальное центрирование */
    }

}