/* Обнуление отступов */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, sans-serif;
}

html {
    scroll-behavior: smooth; /* Плавный скролл до разделов */
}

/* Навбар */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background-color: #ffffff;
    border-bottom: 2px solid #e3f2fd; /* Светло-голубая полоска */
    z-index: 1000;
    padding: 15px 0;
}

.nav-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

/* Логотип */
.logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.logo-text {
    font-size: 20px;
    font-weight: bold;
    color: #007bff; /* Ярко-голубой */
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Ссылки меню */
.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-menu a {
    text-decoration: none;
    color: #444;
    font-weight: 500;
    font-size: 16px;
    transition: color 0.3s ease;
}

.nav-menu a:hover {
    color: #007bff; /* Цвет при наведении */
}

/* Телефон */
.phone-link {
    text-decoration: none;
    background-color: #007bff;
    color: #ffffff;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 15px;
    transition: background 0.3s ease, transform 0.2s;
}

.phone-link:hover {
    background-color: #0056b3;
    transform: scale(1.05);
}

/* Адаптивность для мобилок */
@media (max-width: 768px) {
    .nav-menu {
        display: none; /* Скрываем меню на телефонах (можно будет добавить бургер) */
    }
    
    .nav-container {
        justify-content: center;
        flex-direction: column;
        gap: 10px;
    }
}

/* АВТОМАТИЧЕСКАЯ КАРУСЕЛЬ */
.action-carousel {
    position: relative;
    width: 100%;
    height: 60vh; /* Карусель на 60% высоты экрана */
    overflow: hidden;
    margin-top: 50px; /* Отступ от предыдущего блока */
}

.carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Изначально скрыты */
    transition: opacity 1s ease-in-out; /* Плавный переход */
    z-index: 1;
}

.carousel-slide.active {
    opacity: 1; /* Показываем активный слайд */
    z-index: 2;
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ключевое свойство: картинка идеально подстраивается, не растягиваясь */
}

/* Затемнение поверх */
.carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 74, 153, 0.4); /* Полупрозрачный глубокий голубой фильтр */
    z-index: 3;
}

/* Контент поверх */
.carousel-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Центрирование */
    text-align: center;
    color: #ffffff;
    z-index: 4;
    width: 90%;
    max-width: 800px;
}

.badge-fresh {
    display: inline-block;
    background-color: #ffffff;
    color: #007bff;
    padding: 8px 18px;
    border-radius: 50px;
    font-weight: bold;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
}

.carousel-title {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 15px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Тень для читаемости */
}

.carousel-slogan {
    font-size: 18px;
    margin-bottom: 30px;
    opacity: 0.9;
    font-weight: 500;
}

.btn-carousel {
    display: inline-block;
    background-color: #ffffff;
    color: #007bff;
    padding: 15px 35px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    transition: all 0.3s ease;
}

.btn-carousel:hover {
    background-color: #007bff;
    color: #ffffff;
    transform: scale(1.05);
}

/* Мобильная адаптация */
@media (max-width: 768px) {
    .action-carousel { height: 70vh; }
    .carousel-title { font-size: 26px; }
    .carousel-slogan { font-size: 16px; }
}

/* ВЕСЬ БЛОК ВИДЫ РЕМОНТА */
.services-grid {
    padding: 80px 20px;
    background-color: #ffffff;
}

/* Ограничиваем общую ширину и центрируем на странице */
.services-wrapper {
    max-width: 960px; 
    margin: 0 auto;
}

/* Заголовки: выровнены по левому краю нашей сетки */
.text-group {
    text-align: left;
    margin-bottom: 40px;
    padding-left: 10px;
}

.section-title {
    font-size: 32px;
    color: #004a99;
    margin-bottom: 10px;
    font-weight: 700;
}

.section-subtitle {
    font-size: 18px;
    color: #666;
    margin: 0;
}

/* Сетка карточек строго 2х2 */
.repair-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.repair-card {
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.08);
    border: 1px solid #e3f2fd;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* АНИМАЦИЯ ТУТ */
    display: flex;
    flex-direction: column;
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ */
.repair-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 123, 255, 0.15);
    border-color: #007bff;
}

.card-img {
    height: 200px;
    overflow: hidden;
}

.card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.repair-card:hover .card-img img {
    transform: scale(1.05); /* Легкое увеличение фото при наведении */
}

.card-body {
    padding: 25px;
    text-align: left;
}

.card-body h3 {
    color: #004a99;
    font-size: 22px;
    margin-bottom: 15px;
}

.card-list {
    list-style: none;
    padding: 0;
}

.card-list li {
    position: relative;
    padding-left: 25px;
    margin-bottom: 10px;
    font-size: 15px;
    color: #555;
}

/* ГАЛОЧКИ ТУТ */
.card-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #007bff;
    font-weight: bold;
    font-size: 18px;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .repair-cards {
        grid-template-columns: 1fr;
    }
    .text-group {
        text-align: center;
        padding-left: 0;
    }
}
/* ВЕРТИКАЛЬНЫЙ БЛОК ШАГОВ */
.how-we-work-vertical {
    padding: 80px 20px;
    background-color: #ffffff;
}

.steps-vertical {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}

.step-card {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid #e3f2fd; /* Голубая рамочка */
    border-radius: 15px;
    padding: 30px;
    position: relative;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 123, 255, 0.03);
}

.step-card:hover {
    border-color: #007bff;
    box-shadow: 0 8px 20px rgba(0, 123, 255, 0.1);
    transform: translateX(10px); /* Легкий сдвиг вправо при наведении */
}

.step-number-v {
    font-size: 32px;
    font-weight: 800;
    color: #e3f2fd; /* Светло-голубой номер на фоне */
    min-width: 60px;
    transition: 0.3s;
}

.step-card:hover .step-number-v {
    color: #007bff; /* Номер становится ярким при наведении */
}

.step-content {
    flex-grow: 1;
    padding: 0 20px;
}

.step-content h3 {
    color: #004a99;
    font-size: 20px;
    margin-bottom: 8px;
}

.step-content p {
    color: #555;
    font-size: 15px;
    line-height: 1.5;
    margin: 0;
}

.step-content strong {
    color: #007bff;
}

.step-icon-v {
    font-size: 35px;
    opacity: 0.8;
}

/* Адаптивность для мобилок */
@media (max-width: 600px) {
    .step-card {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    .step-content {
        padding: 15px 0;
    }
    .step-card:hover {
        transform: translateY(-5px); /* На мобилках лучше вверх, а не вправо */
    }
}
/* КЛАССЫ ДЛЯ АНИМАЦИИ ПОЯВЛЕНИЯ (SCROLL EFFECT) */

/* Начальное состояние для всех анимируемых карточек */
.step-card.fade-in-left,
.step-card.fade-in-right {
    opacity: 0;            /* Полностью прозрачные */
    visibility: hidden;    /* Скрыты для скринридеров */
    transition: all 0.8s ease-out; /* Плавность появления (0.8 секунды) */
}

/* Специфика для тех, что слева: сдвинуты влево на 50px */
.step-card.fade-in-left {
    transform: translateX(-50px);
}

/* Специфика для тех, что справа: сдвинуты вправо на 50px */
.step-card.fade-in-right {
    transform: translateX(50px);
}

/* КЛАСС-ТРИГГЕР (добавляется через JS), который запускает появление */
.animated-section.appeared .step-card {
    opacity: 1;
    visibility: visible;
    transform: translateX(0); /* Возвращаются на свое место */
}

/* Добавим небольшую задержку для каждого следующего шага, чтобы они появлялись по очереди */
.animated-section.appeared .step-card:nth-child(1) { transition-delay: 0.1s; }
.animated-section.appeared .step-card:nth-child(2) { transition-delay: 0.3s; }
.animated-section.appeared .step-card:nth-child(3) { transition-delay: 0.5s; }
.animated-section.appeared .step-card:nth-child(4) { transition-delay: 0.7s; }


/* Адаптация для мобильных: на телефонах лучше убрать сдвиг влево-вправо, оставить просто появление */
@media (max-width: 768px) {
    .step-card.fade-in-left,
    .step-card.fade-in-right {
        transform: translateY(30px); /* Просто всплывают снизу */
        transition-duration: 0.6s;
    }
    /* Убираем задержки на мобильных, чтобы не ждать долго скролля */
    .animated-section.appeared .step-card { transition-delay: 0s !important; }
}

/* БЛОК ЛИНИЯ ДОВЕРИЯ */
.trust-line {
    padding: 60px 20px;
    background: linear-gradient(180deg, #ffffff 0%, #f0f8ff 100%);
    border-top: 1px solid #e3f2fd;
}

.trust-grid {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    text-align: center;
}

.trust-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.trust-item h3 {
    color: #004a99;
    font-size: 18px;
    margin: 15px 0 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.trust-item p {
    color: #666;
    font-size: 14px;
    line-height: 1.4;
}

/* ИКОНКИ И ИХ АНИМАЦИИ */
.anim-box {
    width: 70px;
    height: 70px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    box-shadow: 0 10px 20px rgba(0, 123, 255, 0.1);
    border: 2px solid #e3f2fd;
}

/* 1. Пульсация (для денег/цены) */
.pulse {
    animation: pulse-anim 2s infinite;
}
@keyframes pulse-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); box-shadow: 0 10px 25px rgba(0, 123, 255, 0.2); }
    100% { transform: scale(1); }
}

/* 2. Плавание (для скорости) */
.float {
    animation: float-anim 3s ease-in-out infinite;
}
@keyframes float-anim {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

/* 3. Вращение (для запчастей) */
.rotate {
    animation: rotate-anim 5s linear infinite;
}
@keyframes rotate-anim {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* 4. Покачивание (для гарантии) */
.swing {
    animation: swing-anim 3s ease-in-out infinite;
    transform-origin: center;
}
@keyframes swing-anim {
    0%, 100% { transform: rotate(-10deg); }
    50% { transform: rotate(10deg); }
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .trust-grid {
        flex-direction: column;
        gap: 40px;
    }
}
/* БЛОК МАРКИ ХОЛОДИЛЬНИКОВ */
.brands-section {
    padding: 80px 20px;
    background-color: #ffffff; /* Чистый белый фон */
}

.brands-grid {
    display: grid;
    /* Создаем ровно 5 колонок одинаковой ширины */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    margin-top: 40px;
}

.brand-item {
    background: #fff;
    border: 1px solid #e3f2fd; /* Голубая рамочка */
    border-radius: 12px;
    padding: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

/* ЭФФЕКТ ПРИ НАВЕДЕНИИ */
.brand-item:hover {
    border-color: #007bff; /* Рамка становится ярко-голубой */
    box-shadow: 0 8px 25px rgba(0, 123, 255, 0.1);
    transform: translateY(-5px); /* Легкий сдвиг вверх */
}

.brand-item img {
    max-width: 100%;
    height: auto;
    filter: grayscale(100%); /* Делаем логотипы ч/б для общего стиля */
    opacity: 0.6; /* Легкая прозрачность */
    transition: all 0.3s ease;
}

/* При наведении логотип становится цветным и ярким */
.brand-item:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    /* На средних экранах делаем 3 колонки */
    .brands-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {
    /* На самых маленьких - 2 колонки */
    .brands-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}
/* БЛОК ФОРМА ЗАЯВКИ (ИНВЕРСИЯ ЦВЕТОВ) */
.form-section {
    padding: 80px 20px;
    background-color: #fcfdfe; /* Фон самой секции оставляем светлым */
}

/* ИНВЕРТИРОВАННЫЙ КОНТЕЙНЕР ФОРМЫ */
.contact-form-container.inverted {
    background-color: #007bff; /* ФОН СТАЛ ГОЛУБЫМ (ЦВЕТА КНОПКИ) */
    border: none; /* Убираем рамку, она не нужна на заливке */
    border-radius: 20px;
    padding: 40px;
    box-shadow: 0 15px 35px rgba(0, 123, 255, 0.2); /* Тень делаем глубже */
}

.form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.form-group.full-width {
    grid-column: span 2;
}

/* ЛЕЙБЛЫ СТАЛИ БЕЛЫМИ */
.form-group label {
    font-size: 14px;
    font-weight: 600;
    color: #ffffff; /* ТЕКСТ СТАЛ БЕЛЫМ */
    margin-bottom: 8px;
    padding-left: 5px;
    opacity: 0.9; /* Легкая прозрачность для мягкости */
}

/* ПОЛЯ ВВОДА: БЕЛЫЙ ФОН, СИНИЙ ТЕКСТ */
.form-group input, 
.form-group textarea {
    padding: 14px 18px; /* Немного увеличил отступы */
    border: 2px solid transparent; /* Рамка изначально прозрачная */
    border-radius: 12px;
    font-size: 16px;
    color: #004a99; /* ТЕКСТ ВНУТРИ ПОЛЯ СТАЛ СИНИМ */
    background: #ffffff; /* ФОН ПОЛЯ СТАЛ БЕЛЫМ (ЦВЕТА ФОНА) */
    transition: all 0.3s ease;
}

/* Плэйсхолдеры (подсказки) делаем светло-серыми */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: #aaa;
}

/* Эффект при клике на поле: рамка становится темно-синей */
.form-group input:focus, 
.form-group textarea:focus {
    outline: none;
    border-color: #004a99; /* Темно-синий акцент */
    box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* ИНВЕРТИРОВАННАЯ КНОПКА ОТПРАВКИ */
.form-footer {
    margin-top: 35px;
    text-align: center;
}

.submit-btn-inverted {
    background-color: #ffffff; /* ФОН КНОПКИ СТАЛ БЕЛЫМ */
    color: #007bff; /* ТЕКСТ КНОПКИ СТАЛ ГОЛУБЫМ */
    border: none;
    padding: 16px 50px;
    border-radius: 50px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.submit-btn-inverted:hover {
    background-color: #f0f8ff; /* Легкий голубой оттенок при наведении */
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ТЕКСТ О КОНФИДЕНЦИАЛЬНОСТИ СТАЛ БЕЛЫМ */
.form-privacy {
    margin-top: 20px;
    font-size: 13px;
    color: #ffffff;
    opacity: 0.8;
}

/* Адаптивность для мобильных */
@media (max-width: 768px) {
    .form-grid {
        grid-template-columns: 1fr;
    }
    .form-group.full-width {
        grid-column: span 1;
    }
    .contact-form-container.inverted {
        padding: 30px 20px;
    }
    .submit-btn-inverted {
        width: 100%; /* На мобильных кнопка на всю ширину */
        justify-content: center;
    }
}
/* БЛОК ЦЕНЫ */
.prices-section {
    padding: 80px 20px;
    background-color: #ffffff;
}

.price-logic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 40px;
}

.price-factor {
    background: #f0f8ff;
    padding: 25px;
    border-radius: 15px;
    border: 1px solid #e3f2fd;
    text-align: left;
    transition: 0.3s;
}

.price-factor:hover {
    background: #fff;
    border-color: #007bff;
    box-shadow: 0 10px 20px rgba(0,123,255,0.1);
}

.factor-icon {
    font-size: 30px;
    margin-bottom: 15px;
}

.price-factor h4 {
    color: #004a99;
    margin-bottom: 10px;
    font-size: 18px;
}

.price-factor p {
    font-size: 14px;
    color: #666;
    line-height: 1.4;
}

/* ФИНАЛЬНЫЙ БОКС С ОРИЕНТИРАМИ */
.price-estimate-box {
    background: #007bff;
    color: #fff;
    border-radius: 20px;
    padding: 40px;
    text-align: center;
    box-shadow: 0 15px 30px rgba(0,123,255,0.2);
}

.estimate-header {
    font-size: 20px;
    font-weight: bold;
    margin-bottom: 25px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.estimate-body {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}

.est-item {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.est-item span {
    font-size: 14px;
    opacity: 0.9;
}

.est-item strong {
    font-size: 24px;
}

.estimate-footer {
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-top: 25px;
}

.btn-price-call {
    display: inline-block;
    background: #fff;
    color: #007bff;
    padding: 12px 35px;
    border-radius: 50px;
    text-decoration: none;
    font-weight: bold;
    margin-top: 20px;
    transition: 0.3s;
}

.btn-price-call:hover {
    transform: scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* Адаптивность */
@media (max-width: 850px) {
    .price-logic-grid { grid-template-columns: 1fr; }
    .estimate-body { flex-direction: column; gap: 20px; }
}
/* ФИНАЛЬНЫЙ ФУТЕР (2 КОЛОНКИ ПО ЦЕНТРУ) */
.footer {
    padding: 60px 20px 30px;
    background-color: #004a99; /* Глубокий синий */
    color: #ffffff;
}

.footer-wrapper {
    max-width: 900px; /* Ширина как у блоков выше */
    margin: 0 auto;   /* Центрируем весь футер на странице */
}

.footer-content {
    display: flex;
    justify-content: space-between; /* Расталкиваем колонки */
    align-items: center;
    gap: 40px;
    margin-bottom: 40px;
    text-align: left; /* Текст внутри колонок прижат к краям */
}

.footer-logo {
    flex: 1;
}

.logo-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.footer-logo .logo-text {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 1px;
}

.footer-logo p {
    font-size: 14px;
    opacity: 0.8;
    line-height: 1.6;
    margin: 0;
}

.footer-contacts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.foot-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    padding: 10px 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50px;
    transition: all 0.3s ease;
    white-space: nowrap; /* Чтобы телефон не переносился */
}

.foot-link:hover {
    background-color: #ffffff;
    color: #004a99;
    transform: translateX(-5px); /* Сдвиг в сторону центра */
}

.footer-bottom {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    text-align: center; /* Нижняя строка по центру */
    font-size: 13px;
    opacity: 0.5;
}

/* Адаптация для мобильных */
@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }
    .footer-logo {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}