body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f7f7f7; /* Очень светлый фон */
    color: #333;
    line-height: 1.5;
    
}

.img_wrap{
    width: 100%;
    height: 100%;
}

section {
    padding: 0; /* Оставляем вертикальные отступы, убираем горизонтальные */
    margin: 0; /* Убираем внешний отступ */
}
/* ЗАГОЛОВКИ */
h1, h2 {
    color: #004d99;
    text-align: center;
    margin-bottom: 25px;
}



.hero-section {
    display: flex; /* Используем Flexbox для горизонтального расположения */
    align-items: center; /* Выравниваем по центру по вертикали */
    justify-content: space-between; /* Распределяем контент и картинку */
    flex-wrap: wrap; /* Разрешаем элементам переноситься на новую строку на мобильных */
    min-height: 550px; /* Минимальная высота блока */
    padding-top: 60px; /* Добавляем больше отступа сверху */
    padding-bottom: 60px; /* И снизу */
}

.hero-content {
    flex: 1; /* Позволяет контенту занимать доступное пространство */
    padding-right: 40px; /* Отступ от картинки */
    max-width: 600px; /* Ограничиваем ширину контента */
    text-align: left; /* Текст слева */
}

.hero-content h1 {
    font-size: 2.8em; /* Крупный заголовок */
    color: #333; /* Темный текст */
    margin-bottom: 20px;
    text-align: left; /* Переопределяем центрирование */
    line-height: 1.2;
}

.hero-content p {
    font-size: 1.2em; /* Крупный подзаголовок */
    color: #555;
    margin-bottom: 30px;
    text-align: left; /* Переопределяем центрирование */
    line-height: 1.6;
}

.hero-image {
    flex: 1; /* Позволяет картинке занимать доступное пространство */
    text-align: right; /* Картинка справа */
    max-width: 50%; /* Ограничиваем ширину картинки */
}

.hero-image img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Кнопка "Начать" */
.btn-get-started {
    display: inline-block;
    background-color: #28a745; /* Зеленый цвет */
    color: #fff;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 8px;
    font-size: 1.1em;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.btn-get-started:hover {
    background-color: #218838; /* Темнее при наведении */
}

/* === СТИЛИ ДЛЯ МОДАЛЬНОГО ОКНА === */

.modal {
    display: none; /* 🔥 По умолчанию скрываем окно */
    position: fixed; 
    z-index: 2000; /* Очень высокий Z-индекс, чтобы быть поверх всего */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%;
    overflow: auto; 
    background-color: rgba(0,0,0,0.7); /* Темный полупрозрачный фон */
    padding-top: 60px;
}

.modal-content {
    background-color: #fefefe;
    margin: 5% auto; /* Центрируем по вертикали и горизонтали */
    padding: 30px;
    border: 1px solid #888;
    width: 90%; 
    max-width: 500px; /* Ограничиваем ширину */
    border-radius: 10px;
    position: relative;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.close-btn {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    line-height: 1;
}

.close-btn:hover,
.close-btn:focus {
    color: #333;
    text-decoration: none;
    cursor: pointer;
}

/* Стилизация полей формы внутри модального окна */
.modal-content label {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    font-weight: bold;
    color: #555;
}

.modal-content input[type="tel"],
.modal-content input[type="email"],
.modal-content textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Важно, чтобы padding не увеличивал общую ширину */
    font-size: 1em;
}

.modal-content textarea {
    resize: vertical; /* Разрешаем изменение размера только по вертикали */
}

.modal-content button[type="submit"] {
    width: 100%;
    background-color: #004d99;
    color: white;
    padding: 12px 20px;
    margin-top: 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s;
}

.modal-content button[type="submit"]:hover {
    background-color: #003366;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 768px) {
    .hero-section {
        flex-direction: column; /* Элементы друг под другом */
        text-align: center;
        min-height: auto;
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .hero-content {
        padding-right: 0;
        margin-bottom: 30px;
        max-width: 100%;
        text-align: center;
    }
    .hero-content h1, .hero-content p {
        text-align: center;
    }
    .hero-image {
        max-width: 80%;
        text-align: center;
    }
}

/* ---------------------------------- */
/* 1. Общие стили секции и контейнера */
/* ---------------------------------- */
.location-section {
    padding: 80px 0; /* Увеличенный вертикальный отступ */
    background-color: #fcfcfc; /* Очень светлый, почти белый фон */
}

/* Предполагая, что ваш content-wrapper центрирует контент */
.content-wrapper {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------------------------------- */
/* 2. Стили блока информации */
/* ---------------------------------- */
.map-info {
    text-align: center;
    margin-bottom: 40px; /* Отделяем текст от карты */
}

.map-info h2 {
    font-size: 2.8em;
    color: #2c3e50; /* Глубокий темный цвет */
    margin-bottom: 15px;
    font-weight: 700;
    /* Выделение акцентного слова */
    /* Вы можете заменить 'Местоположение' на другой цвет */
    /* .map-info h2 strong { color: #3498db; } */ 
}

.map-info p {
    font-size: 1.15em;
    color: #7f8c8d; /* Мягкий серый цвет */
    margin-bottom: 25px;
}

.map-info .fa-location-dot {
    color: #e74c3c; /* Красный акцент для иконки (как на картах) */
    margin-right: 8px;
}

/* ---------------------------------- */
/* 3. Стили самой карты (Эффект "парения") */
/* ---------------------------------- */
.map-container-styled {
    position: relative;
    /* Устраняем острые углы */
    border-radius: 16px; 
    /* Мощная, но мягкая тень */
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); 
    overflow: hidden; 
}

/* Стили для iframe (карта) */
.map-container-styled iframe {
    border: none !important; 
    border-radius: 16px; 
    width: 100%;
    height: 450px; 
    /* Добавляем легкую анимацию при загрузке (очень subtle) */
    transition: transform 0.3s ease;
}

/* Если хотите добавить легкое увеличение при наведении */
.map-container-styled:hover iframe {
    transform: scale(1.01);
}


/* ---------------------------------- */
/* 4. Стили современной кнопки (CTA) */
/* ---------------------------------- */
.map-link {
    display: inline-block;
    padding: 12px 30px;
    background-color: #3498db; /* Яркий акцентный цвет */
    color: white;
    text-decoration: none;
    border-radius: 8px; /* Более округлые углы */
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-weight: 600;
    letter-spacing: 0.5px;
    border: 2px solid #3498db; /* Граница для контраста */
}

.map-link:hover {
    background-color: #2980b9; 
    transform: translateY(-3px); /* Выделение кнопки */
    box-shadow: 0 5px 15px rgba(52, 152, 219, 0.4);
}


.owl-theme .owl-dots {
    display: none !important;
}

/* 2. Показываем кнопки навигации (Next/Prev) */
.owl-theme .owl-nav {
    position: absolute; /* Позиционируем их относительно контейнера */
    top: 50%; /* Смещаем на середину */
    transform: translateY(-50%); /* Центрируем вертикально */
    width: 100%;
    margin: 0;
    padding: 0 10px; /* Отступ от краев */
    display: flex;
    justify-content: space-between; /* Размещаем по краям */
}

/* 3. Стилизуем сами кнопки */
.owl-theme .owl-nav [class*='owl-'] {
    background: rgba(0, 0, 0, 0.6); /* Полупрозрачный фон */
    color: #FFF;
    border-radius: 50%; /* Круглая форма */
    font-size: 24px;
    line-height: 1;
    padding: 10px 15px;
    transition: background 0.3s;
    opacity: 0.8;
}

.owl-theme .owl-nav [class*='owl-']:hover {
    background: #004d99; /* Синий при наведении */
}

/* КОНТЕЙНЕР ДЛЯ ОГРАНИЧЕНИЯ КОНТЕНТА */
.content-wrapper {
    width: 90vw;
    margin: 0 auto;
    padding: 40px 15px; 
}



/* Убираем верхний отступ у секции с картой */
#location {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

#location .content-wrapper {
    padding-top: 10px !important;
}

/* === СТИЛИ ДЛЯ ФИКСИРОВАННОГО ХЕДЕРА === */
#main-header {
    width: 100%;
    background-color: #004d99; /* Синий фон, как у контактов */
    color: #ffffff;
    padding: 0; 
    height: auto;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000; /* Гарантируем, что шапка всегда поверх другого контента */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Настраиваем Flexbox для логотипа и меню */
#main-header .content-wrapper {
    display: flex;
    justify-content: space-between; /* Лого слева, меню справа */
    align-items: center;
    padding-top: 15px; /* Уменьшаем вертикальный отступ шапки */
    padding-bottom: 15px;
}

.logo {
    font-size: 1.5em;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
}

/* Стилизация ссылок меню */
#main-header nav a {
    color: #ffffff;
    text-decoration: none;
    font-weight: 500;
    margin-left: 20px;
    padding: 5px 0;
    transition: color 0.3s;
}

#main-header nav a:hover {
    color: #e6eef5; /* Светлее при наведении */
}

#hero-banner {
    /* Укажите правильный путь к вашему загруженному изображению */
    width: 100%;
    background-image: url("1.png");
    background-size: cover; /* Изображение будет покрывать всю секцию */
    background-position: center; /* Центрируем изображение */
    height: 803px; /* Задаем высоту (можно настроить) */
    display: flex; /* Используем Flexbox для центрирования содержимого */
    align-items: center; /* Центрируем вертикально */
    justify-content: center; /* Центрируем горизонтально */
    text-align: center;
    position: relative; /* Нужно для наложения затемнения */
    top: 0;
    color: #fff; /* Белый цвет текста для контраста */
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Добавляем затемнение, чтобы текст был читаемым */
#hero-banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); /* Черный цвет с прозрачностью 40% */
    z-index: 1;
}

/* Перемещаем текст над затемнением */
.hero-content-centered {
    position: relative;
    z-index: 2;
}

/* Стиль для заголовка */
#hero-banner h1 {
    color: #ffffff;
    font-size: 4em;
    margin-bottom: 10px;
}

/* Стиль для подзаголовка */
#hero-banner p {
    font-size: 1.5em;
    margin-bottom: 30px;
    
}

#hero-banner .phone-number {
    font-size: 0.7em; 
    margin-top: 10px; 
    margin-bottom: 5px; /* 🔥 Уменьшаем отступ снизу */
}

#hero-banner .phone-number a {
    color: #ffffff; 
    text-decoration: none; 
    transition: color 0.3s;
}

#hero-banner .phone-number a:hover {
    color: #fff; 
}
/* === СТИЛИ ДЛЯ НОВОГО БЛОКА "О НАС" (#about-us-info) === */

#about-us-info {
    padding: 80px 0;
    background-color: #ffffff; /* Белый фон */
    text-align: center;
}

/* Сетка для расположения текста и картинки */
.info-content-grid {
    display: flex;
    align-items: center; /* Центрируем элементы по вертикали */
    gap: 50px; /* Расстояние между текстом и картинкой */
    max-width: 1200px;
    margin: 0 auto;
}


.info-text-area-centered {
    max-width: 900px;
    margin: 0 auto; /* Центрируем сам блок */
}

.info-image-area .pvh-image {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* Заголовки и текст */
#about-us-info h2 {
    font-size: 2.2rem;
    color: #004d99; /* Синий цвет */
    margin-bottom: 25px;
    text-align: center; /* Переопределяем центрирование */
    border-bottom: 3px solid #28a745; /* Зеленая линия акцента */
    display: inline-block;
    padding-bottom: 5px;
}

#about-us-info p {
    font-size: 1.1rem;
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
    text-align: center;
}

.features-row {
    display: flex;
    justify-content: space-between;
    gap: 30px;
    margin-bottom: 50px;
    margin-top: 50px;
}

.feature-item {
    flex: 1;
    padding: 20px;
    background-color: #f7f9fc; /* Светлый фон карточки */
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.feature-item i {
    font-size: 3rem;
    color: #28a745; /* Зеленая иконка */
    margin-bottom: 15px;
    display: block;
}

.feature-item h3 {
    font-size: 1.25rem;
    color: #333;
    margin-bottom: 10px;
}

.feature-item p {
    font-size: 0.95rem;
    color: #777;
    margin: 0;
    text-align: center;
}

.btn-primary-large {
    display: inline-block;
    background-color: #004d99;
    color: #fff !important;
    padding: 15px 35px;
    border-radius: 5px;
    font-size: 1.1rem;
    font-weight: 700;
    transition: background-color 0.3s;
    text-transform: uppercase;
}

.btn-primary-large:hover {
    background-color: #003366;
}

/* Адаптивность для мобильных устройств */
@media (max-width: 900px) {
   .features-row {
        flex-direction: column; /* Элементы друг под другом */
        gap: 20px;
        padding: 0 15px;
    }
}
/* === НОВЫЙ БЛОК ПОРТФОЛИО === */

#portfolio {
    padding: 20px 0; /* Больше воздуха сверху и снизу */
    background-color: #f4f6f9; /* Светлый, но не белый фон для контраста с карточками */
}

/* Заголовки секции */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header h2 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin-bottom: 10px;
    font-weight: 700;
}

.section-header .subtitle {
    font-size: 1.1rem;
    color: #7f8c8d;
    max-width: 600px;
    margin: 0 auto;
}

/* === СТИЛЬ КАРТОЧКИ === */
.portfolio-card {
    background: #fff;
    border-radius: 16px; /* Современное скругление */
    overflow: hidden; /* Чтобы картинка не вылезала за скругление */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* Очень мягкая тень */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin: 15px; /* Отступ между слайдами */
    height: 100%; /* Растягиваем на всю высоту */
}

/* Эффект при наведении на карточку */
.portfolio-card:hover {
    transform: translateY(-7px); /* Карточка "взлетает" */
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1); /* Тень становится глубже */
}

/* Блок с картинкой */
.card-image {
    position: relative;
    height: 250px; /* Фиксированная высота картинки - ВАЖНО для ровной сетки */
    overflow: hidden;
}

.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Картинка заполняет блок, не растягиваясь */
    transition: transform 0.5s ease;
}

/* Эффект зума картинки при наведении */
.portfolio-card:hover .card-image img {
    transform: scale(1.05);
}

/* Текстовый контент */
.card-content {
    padding: 25px;
    text-align: left;
}

.card-content h3 {
    font-size: 1.25rem;
    color: #34495e;
    margin: 0 0 10px 0;
    font-weight: 600;
    height: auto; /* Убираем жесткую высоту заголовка */
}

.card-content p {
    font-size: 0.95rem;
    color: #7f8c8d;
    line-height: 1.6;
    margin: 0;
}

/* === НАВИГАЦИЯ КАРУСЕЛИ (СТРЕЛКИ) === */
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    background-color: #fff !important;
    border-radius: 50% !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    color: #004d99 !important;
    font-size: 24px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    outline: none;
}

.owl-carousel .owl-nav button.owl-prev {
    left: -20px;
}

.owl-carousel .owl-nav button.owl-next {
    right: -20px;
}

.owl-carousel .owl-nav button.owl-prev:hover,
.owl-carousel .owl-nav button.owl-next:hover {
    background-color: #004d99 !important;
    color: #fff !important;
    cursor: pointer;
}

/* ---------------------------------- */
/* 1. Общие стили секции */
/* ---------------------------------- */
.contact-section {
    padding: 80px 0;
    /* Яркий фон, чтобы привлечь внимание перед футером */
    background-color: #f3f9ff; 
    text-align: center;
}

.content-wrapper {
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

.contact-title {
    font-size: 2.5em;
    color: #007bff; /* Акцентный синий цвет */
    margin-bottom: 10px;
    font-weight: 700;
}

.contact-title strong {
    color: #34495e; /* Выделение части заголовка */
}

.contact-subtitle {
    font-size: 1.2em;
    color: #666;
    margin-bottom: 40px;
}

.contact-subtitle .highlight {
    font-weight: 600;
    color: #007bff;
}


/* ---------------------------------- */
/* 2. Стили деталей контактов (GRID) */
/* ---------------------------------- */
.contact-details-grid {
    display: grid;
    /* Две равные колонки для телефона и email */
    grid-template-columns: 1fr 1fr; 
    gap: 30px;
    margin-bottom: 40px;
}

.contact-item {
    padding: 25px;
    background-color: #fff;
    border-radius: 12px;
    /* Мягкая, ненавязчивая тень */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); 
    display: flex;
    align-items: center;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact-item:hover {
    transform: translateY(-5px); /* Эффект легкого поднятия */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

.contact-icon {
    font-size: 2.2em;
    margin-right: 20px;
    /* Стилизация иконки */
    padding: 10px;
    border-radius: 50%;
    color: #fff;
    background-color: #007bff; 
}

/* Настройка цветов для разных иконок */
.phone-item .contact-icon {
    background-color: #28a745; /* Зеленый для телефона */
}
.email-item .contact-icon {
    background-color: #dc3545; /* Красный для email */
}

.contact-text .label {
    display: block;
    font-size: 0.9em;
    color: #777;
    margin-bottom: 3px;
}

.contact-value {
    font-size: 1.3em;
    font-weight: 600;
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-value:hover {
    color: #007bff;
}

/* ---------------------------------- */
/* 3. Время работы */
/* ---------------------------------- */
.work-time {
    font-size: 1.1em;
    color: #555;
    font-style: italic;
    padding-top: 20px;
    border-top: 1px dashed #ddd; /* Мягкий разделитель */
}

.work-time .fa-clock {
    color: #ffc107; /* Желтый акцент */
    margin-right: 8px;
}

/* ---------------------------------- */
/* 4. Адаптивность для мобильных */
/* ---------------------------------- */
@media (max-width: 600px) {
    .contact-details-grid {
        /* При маленьком экране колонки располагаются вертикально */
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .contact-item {
        /* На мобильных центрируем текст */
        justify-content: center;
        text-align: center;
        flex-direction: column;
    }
    .contact-icon {
        margin-right: 0;
        margin-bottom: 10px;
    }
}

/* ---------------------------------- */
/* 1. Стиль для нового блока "Оформить заказ" */
/* ---------------------------------- */
.contact-item.order-item .contact-icon {
    /* Другой цвет для иконки, чтобы выделить CTA */
    background-color: #f39c12; 
}

/* ---------------------------------- */
/* 2. Стиль самой кнопки в контактах */
/* ---------------------------------- */
.btn-contact-action {
    display: inline-block;
    padding: 10px 15px;
    background-color: #2ecc71; /* Привлекательный зеленый цвет */
    color: white !important; /* Важно, чтобы текст был белым */
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    font-size: 1.1em;
}

.btn-contact-action:hover {
    background-color: #27ae60;
    transform: translateY(-2px);
    box-shadow: 0 5px 10px rgba(46, 204, 113, 0.4);
    color: white !important;
}

/* ---------------------------------- */
/* 3. Корректировка основного стиля (если нужно) */
/* ---------------------------------- */
/* Убедитесь, что email-item стиль удален, если он был ранее */
/* Если вы используете старые стили, то .email-item нужно заменить на .order-item */