/* ============================================================
   ФАЙЛ: style.css
   НАЗНАЧЕНИЕ: общие стили для всех страниц сайта
   ============================================================ */

/* ============================================================
   БЛОК 1: СБРОС СТАНДАРТНЫХ СТИЛЕЙ БРАУЗЕРА
   ============================================================ */


* {
    margin: 0;          /* убираем внешние отступы у всех элементов */
    padding: 0;         /* убираем внутренние отступы у всех элементов */
    box-sizing: border-box; /* ширина элемента считается вместе с рамками и отступами */
}/* означает "все элементы на странице" */

/* ============================================================
   БЛОК 2: ГЛОБАЛЬНЫЕ НАСТРОЙКИ ВСЕЙ СТРАНИЦЫ
   ============================================================ */


html {
    scroll-behavior: smooth; /* плавная прокрутка при клике по якорным ссылкам */
}


body {
    font-family: 'Roboto', sans-serif; /* основной шрифт — Roboto, если не загрузится — любой без засечек */
    background: #f5f5f5;               /* цвет фона всей страницы — светло-серый */
    color: #2a2a2a;                    /* цвет текста по умолчанию — тёмно-серый */
    line-height: 1.6;                  /* межстрочный интервал — текст не слипается */
}/* тег, в котором находится всё видимое содержимое страницы */

/* ============================================================
   БЛОК 3: ОБЩИЙ КОНТЕЙНЕР (центрирование контента)
   ============================================================*/

/* .container — класс для всех блоков, которые нужно отцентрировать */
.container {
    max-width: 1200px; /* максимальная ширина контента на широких экранах */
    margin: 0 auto;    /* выравнивание по центру страницы */
    padding: 0 20px;   /* отступы по бокам — чтобы текст не прилипал к краям на телефонах */
}

/* ============================================================
   БЛОК 4: ШАПКА (HEADER)
   ============================================================ */


header {
    background: linear-gradient(135deg, #141414 0%, #1a1a1a 50%, #222222 100%);
                       /* градиентный фон: сверху темнее (#141414), снизу светлее (#222222) */
    color: #fff;       /* цвет текста в шапке — белый */
    padding: 18px 0;   /* отступы внутри шапки: 18px сверху/снизу, 0 по бокам */
    border-bottom: 3px solid #a1282d; /* красная полоса снизу */
}


.header-flex {
    display: flex;              /* включает гибкую вёрстку — элементы в ряд */
    justify-content: space-between; /* логотип слева, телефон справа, между ними всё свободное место */
    align-items: center;        /* выравнивает логотип и телефон по вертикали по центру */
    flex-wrap: wrap;            /* на узких экранах элементы переносятся на новую строку */
    gap: 15px;                 /* расстояние между логотипом и телефоном (если они встанут в столбик) */
}/* контейнер для логотипа и телефона (гибкая вёрстка) */


.logo-block a {
    display: flex;          /* выстраивает логотип и название (если есть) в ряд */
    align-items: center;    /* выравнивает по вертикали по центру */
    text-decoration: none;  /* убирает подчёркивание ссылки */
}/* ссылка вокруг логотипа - это на всякий случай*/

/* .logo-block img — сам логотип */
.logo-block img {
    height: 55px;           /* высота логотипа — 55 пикселей */
    width: auto;            /* ширина подстраивается пропорционально высоте */
    transition: transform 0.3s ease; /* плавная анимация при наведении — 0.3 секунды */
}


.logo-block img:hover {
    transform: scale(1.05); /* увеличивает логотип на 5% при наведении */
}/* навели мышку */


.phone {
    font-size: 20px;           /* размер шрифта номера */
    font-weight: 700;          /* жирность шрифта (700 = bold) */
    color: #fff;               /* белый цвет текста */
    text-decoration: none;     /* убирает подчёркивание ссылки */
    border: 2px solid #a1282d; /* красная рамка толщиной 2px */
    padding: 10px 28px;        /* отступы внутри кнопки: 10px сверху/снизу, 28px слева/справа */
    border-radius: 50px;       /* скругляет углы — делает овальную кнопку */
    transition: all 0.3s ease; /* плавная анимация при наведении */
    white-space: nowrap;       /* запрещает перенос номера на новую строку */
}/* кнопка с номером телефона в шапке */


.phone:hover {
    background: #a1282d;               /* фон становится красным */
    color: #1a1a1a;                    /* текст становится тёмным */
    transform: scale(1.03);            /* кнопка чуть увеличивается */
    box-shadow: 0 0 30px rgba(161, 40, 45, 0.3); /* красное свечение вокруг кнопки */
}/* кнопка телефона при наведении мыши */

/* 
   БЛОК 5: МЕНЮ (NAVIGATION)
    */


nav {
    background: #2a2a2a;                 /* тёмно-серый фон меню */
    position: sticky;                    /* меню прилипает к верху при скролле */
    top: 0;                              /* прилипает к самому верху */
    z-index: 100;                        /* меню поверх всех элементов */
    box-shadow: 0 4px 20px rgba(0,0,0,0.4); /* тень под меню — создаёт глубину */
}


nav ul {
    display: flex;           /* пункты меню в ряд */
    list-style: none;        /* убирает маркеры списка (точки) */
    justify-content: center; /* выравнивает пункты по центру */
    flex-wrap: wrap;         /* на узких экранах пункты переносятся на новую строку */
}/* список пунктов меню */


nav ul li a {
    display: block;              /* ссылка занимает всю ширину ячейки (легче кликать) */
    padding: 15px 30px;          /* отступы внутри кнопок меню */
    color: #d0d0d0;              /* цвет текста — светло-серый */
    font-weight: 700;            /* жирный шрифт */
    text-decoration: none;       /* убирает подчёркивание ссылки */
    text-transform: uppercase;   /* ВСЕ БУКВЫ ЗАГЛАВНЫЕ */
    font-size: 14px;             /* размер шрифта */
    letter-spacing: 1px;         /* расстояние между буквами */
    border-bottom: 3px solid transparent; /* прозрачная полоса снизу (нужна для анимации) */
    transition: all 0.3s ease;   /* плавная анимация при наведении */
}/* каждая ссылка в меню */


nav ul li a:hover {
    color: #ffffff;               /* текст становится белым */
    border-bottom-color: #a1282d; /* появляется красная полоса снизу */
}/* пункт меню при наведении мыши */


nav ul li a.active {
    color: #ffffff;               /* текст активной страницы белый */
    border-bottom-color: #a1282d; /* красная полоса снизу */
}/* активный пункт меню (текущая страница) */

/* 
   БЛОК 6: ОСНОВНЫЕ КНОПКИ НА САЙТЕ (БОЛЬШИЕ С КРАСНОЙ ПОДСВЕТКОЙ)*/
    


.btn-primary {
    background: linear-gradient(135deg, #a1282d, #c93a40); /* градиент от тёмно-красного к светлому */
    color: #fff;                 /* белый текст */
    padding: 18px 60px;          /* отступы внутри кнопки */
    font-size: 18px;             /* размер шрифта */
    font-weight: 700;            /* жирный шрифт */
    text-transform: uppercase;   /* ВСЕ ЗАГЛАВНЫЕ */
    text-decoration: none;       /* убирает подчёркивание */
    border-radius: 50px;         /* скруглённые углы */
    display: inline-block;       /* кнопка ведёт себя как блок, но не занимает всю ширину */
    box-shadow: 0 10px 40px rgba(161, 40, 45, 0.4); /* тень — красное свечение */
    transition: all 0.4s ease;   /* плавная анимация при наведении */
    border: none;                /* без рамки */
    cursor: pointer;             /* курсор становится рукой */
}/*главная кнопка (красная, градиент) */


.btn-primary:hover {
    transform: translateY(-5px);            /* кнопка поднимается на 5px вверх */
    box-shadow: 0 20px 50px rgba(161, 40, 45, 0.6); /* усиливается тень */
}/*  главная кнопка при наведении */

/* 
   БЛОК 7: ЗАГОЛОВКИ РАЗДЕЛОВ
    */


.section-title {
    text-align: center;    /* выравнивание по центру */
    font-size: 38px;       /* крупный шрифт */
    font-weight: 900;      /* самый жирный шрифт */
    margin: 60px 0 15px;   /* отступы: 60px сверху, 0 по бокам, 15px снизу */
    color: #1a1a1a;        /* тёмный цвет */
}/* заголовок раздела (например, "Наши услуги") */


.section-title span {
    color: #a1282d;        /* красный цвет */
}/* красное выделение в заголовке */


.section-subtitle {
    text-align: center;    /* выравнивание по центру */
    color: #5b5b5b;        /* серый цвет */
    margin-bottom: 50px;   /* отступ снизу */
    font-size: 18px;       /* размер шрифта */
    font-weight: 300;      /* тонкий шрифт (не жирный) */
}/* подзаголовок (текст под заголовком) */

/* 
   БЛОК 8: СЕТКИ ДЛЯ КАРТОЧЕК
    */


.grid-3 {
    display: grid;                                   /* включает сетку (таблица) */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                                                       /* столбцы подстраиваются: минимум 280px,
                                                          максимум — сколько влезет */
    gap: 30px;                                       /* расстояние между карточками */
    margin: 40px 0 60px;                             /* отступы: 40px сверху, 0 по бокам, 60px снизу */
}/* сетка из трёх колонок */


.grid-2 {
    display: grid;                                   /* включает сетку */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
                                                       /* столбцы минимум 350px */
    gap: 40px;                                       /* расстояние между карточками больше */
    margin: 40px 0 60px;                             /* отступы: 40px сверху, 0 по бокам, 60px снизу */
}/* сетка из двух колонок (похожа на grid-3, но карточки шире) */

/* 
   БЛОК 9: КАРТОЧКИ (УСЛУГИ, ПРОЕКТЫ)
    */


.card {
    background: #ffffff;           /* белый фон */
    border-radius: 16px;           /* скруглённые углы */
    overflow: hidden;              /* всё, что выходит за границы, обрезается */
    box-shadow: 0 5px 30px rgba(0,0,0,0.06); /* лёгкая тень */
    transition: all 0.4s ease;     /* плавная анимация при наведении */
}/* сама карточка (белый прямоугольник с тенью) */


.card:hover {
    transform: translateY(-10px);                     /* карточка поднимается на 10px вверх */
    box-shadow: 0 25px 60px rgba(161, 40, 45, 0.12); /* тень становится больше и красноватой */
}/* если навести мыши */

/* .card-body — внутренняя часть карточки (текст) */
.card-body {
    padding: 30px;                 /* отступы внутри карточки */
}

/* .card-body h3 — заголовок внутри карточки */
.card-body h3 {
    font-size: 22px;               /* размер шрифта */
    margin-bottom: 10px;           /* отступ снизу */
    color: #1a1a1a;                /* тёмный цвет */
}

/* .card-body p — текст внутри карточки */
.card-body p {
    color: #5b5b5b;                /* серый цвет */
    font-size: 15px;               /* размер шрифта */
}

/* .card-body .btn-link — ссылка "Подробнее" в карточке */
.card-body .btn-link {
    display: inline-block;         /* ссылка-кнопка */
    margin-top: 15px;              /* отступ сверху */
    color: #a1282d;                /* красный цвет */
    font-weight: 700;              /* жирный */
    text-decoration: none;         /* без подчёркивания */
    transition: 0.3s;              /* плавная анимация */
}


.card-body .btn-link:hover {
    color: #7a1e22;                /* цвет становится темнее (насыщеннее) */
}

/*
   БЛОК 10: ПОДВАЛ (FOOTER)
   */


footer {
    background: #0d0d0d;           /* очень тёмный фон */
    color: #5b5b5b;                /* серый текст */
    padding: 50px 0;               /* отступы внутри подвала */
    margin-top: 40px;              /* отступ сверху от предыдущего блока */
    border-top: 4px solid #a1282d; /* красная полоса сверху */
}


.footer-flex {
    display: flex;                 /* колонки в ряд */
    justify-content: space-between; /* равномерно распределяет колонки */
    flex-wrap: wrap;               /* на узких экранах переносит вниз */
    gap: 30px;                     /* расстояние между колонками */
}/* контейнер для колонок в подвале */


.footer-col p {
    margin: 5px 0;                 /* маленькие отступы между строками */
    color: #5b5b5b;                /* серый цвет */
    font-size: 15px;               /* размер шрифта */
}/* строки в колонках подвала */


.footer-col a {
    color: #a1282d;                /* красный цвет */
    text-decoration: none;         /* без подчёркивания */
} /* ссылки в подвале (телефон, email) */


.footer-col a:hover {
    text-decoration: underline;    /* появляется подчёркивание */
}/* ссылки в подвале при наведении */


.footer-col h3 {
    color: #ffffff;                /* белый цвет */
    margin-bottom: 12px;           /* отступ снизу */
    font-size: 20px;               /* размер шрифта */
}/* название компании в подвале */


.footer-col .small-desc {
    font-size: 13px;               /* маленький шрифт */
    color: #4a4a4a;                /* тускло-серый */
    margin-top: 5px;               /* отступ сверху */
}/* маленькое описание под названием */


.copyright {
    text-align: center;            /* по центру */
    padding-top: 30px;             /* отступ сверху */
    border-top: 1px solid #1a1a1a; /* тонкая серая линия-разделитель */
    margin-top: 30px;              /* отступ сверху */
    font-size: 14px;               /* размер шрифта */
    color: #4a4a4a;                /* серый цвет */
}/* строка с копирайтом в самом низу */


/* ============================================================
   БЛОК: CTA (призыв к действию) — используется на всех страницах
   ============================================================ */

.cta-section {
    background: linear-gradient(135deg, #141414, #1a1a1a);
    padding: 80px 0;
    text-align: center;
    border-radius: 24px;
    margin: 60px 0;
    color: #fff;
    border-left: 6px solid #a1282d;
    border-right: 6px solid #a1282d;
    position: relative;
    overflow: hidden;
}

.cta-section h2 {
    font-size: 38px;
    margin-bottom: 15px;
    letter-spacing: 1px;
}

.cta-section h2 span {
    color: #a1282d;
}

.cta-section p {
    font-size: 18px;
    opacity: 0.8;
    margin-bottom: 30px;
    color: #d0d0d0;
}


/* 
   БЛОК 11: АДАПТИВНОСТЬ ДЛЯ ПЛАНШЕТОВ (ширина экрана меньше 768px)
    */

/* @media — стили применяются только при определённой ширине экрана */
@media (max-width: 768px) {

    /* ШАПКА: элементы встают в столбик */
    .header-flex {
        flex-direction: column;    /* логотип и телефон друг под другом */
        align-items: center;       /* выравнивание по центру */
        text-align: center;        /* текст по центру */
    }

    /* ТЕЛЕФОН: становится меньше на планшетах */
    .phone {
        font-size: 18px;           /* размер шрифта чуть меньше */
        padding: 8px 20px;         /* отступы внутри кнопки меньше */
    }

    /* МЕНЮ: пункты становятся компактнее */
    nav ul li a {
        padding: 10px 18px;        /* меньше отступы у пунктов меню */
        font-size: 12px;           /* меньше шрифт в меню */
    }

    /* ЗАГОЛОВКИ РАЗДЕЛОВ: становятся меньше */
    .section-title {
        font-size: 28px;           /* размер шрифта меньше */
    }

    /* СЕТКА: две колонки становятся одной */
    .grid-2 {
        grid-template-columns: 1fr; /* одна колонка вместо двух */
    }

    /* ПОДВАЛ: колонки в столбик */
    .footer-flex {
        flex-direction: column;    /* колонки друг под другом */
        text-align: center;        /* всё по центру */
    }

    /*Блоки на страницах "Проекты" и "О компании"*/
    .cta-section {
        padding: 40px 20px;
        border-left-width: 3px;
        border-right-width: 3px;
    }

    .cta-section h2 {
        font-size: 26px;
    }
}

/* 
   БЛОК 12: АДАПТИВНОСТЬ ДЛЯ МАЛЕНЬКИХ ТЕЛЕФОНОВ (ширина экрана меньше 480px)
    */

@media (max-width: 480px) {

    /* СЕТКА ИЗ ТРЁХ КОЛОНОК: становится одной */
    .grid-3 {
        grid-template-columns: 1fr; /* одна колонка вместо трёх */
    }

    /* ЛОГОТИП: становится меньше */
    .logo-block img {
        height: 45px;              /* высота логотипа меньше */
    }

    /* ГЛАВНАЯ КНОПКА: становится компактнее */
    .btn-primary {
        padding: 14px 30px;        /* отступы внутри кнопки меньше */
        font-size: 15px;           /* шрифт кнопки меньше */
    }
}