@font-face {
    font-family: 'Monitorica';
    src: url('/fonts/Monitorica-Bd.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Обычный шрифт */
@font-face {
    font-family: 'Monitorica';
    src: url('/fonts/Monitorica-Rg.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* ПОДКЛЮЧАЕМ MONTSERRAT (ДЛЯ ТЕКСТА) */
/* Обычный */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
}

/* Средний (для ссылок) */
@font-face {
    font-family: 'Montserrat';
    src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: "Monitorica", Sans-serif, serif;
}

html, body {
    font-family: 'Montserrat', sans-serif;
    font-weight: 400;
    line-height: 1.6;
    color: #54595F;
}

/* Назначаем Мониторику только заголовку h1 (и другим, если нужно) */
h1, .main-title {
    font-family: 'Monitorica', sans-serif;
    font-weight: bold;
}

/* Ссылки делаем чуть плотнее (Medium) */
a, p, .menu-links a {
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
    text-decoration: none;
}

html {
    background-color: #f7fafa;
    font-size: 10px;
}

.main-wrapper {
    margin: 0 auto;
    max-width: 1900px;
    padding: 0 1rem;
}

/* 2. Основной контейнер секции */
.main-banner {
    display: flex;
    min-height: 60rem; /* Высота секции, можно менять */
    width: 100%;
    background: url('/images/blue_bg_main.jpg') no-repeat center / cover;
    border-radius: 3rem;
}

/* 3. Левая часть (Текст и Логотип) */
.content-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 7rem 7rem 7rem 7rem;
    color: #ffffff;
    width: 50%;

}

.logo {
    display: block;
    border-radius: 15px;
    background-color: white;
    width: 31rem;
    padding: 1rem;
}

.logo img {
    width: 29rem; /* Настройте ширину под свой дизайн */
    height: auto; /* Сохранит пропорции */

}

.logo a {
    display: block;

}


.main-title {
    font-size: 4.4rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* 4. Правая часть (Фото-фон и Меню) */
.content-right {
    flex: 1;
    background: url('/images/main_photo_1280x854_02-1024x683.jpg') no-repeat center / cover;
    display: flex;
    justify-content: flex-end; /* Прижимает всё содержимое к правому краю */
    padding: 7rem 7rem 7rem 7rem;
    border-radius: 3rem;
}

/* 5. Навигация (вертикальная колонка) */
.side-menu {
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* "МЕНЮ" вверх, список ссылок вниз */
    height: 100%;
    text-align: right;
}

/* Заголовок МЕНЮ */
.menu-label {
    font-size: 5rem;
    font-weight: bold;
    color: #54595F;
    text-transform: uppercase;
    letter-spacing: 0.2rem;
    margin-bottom: 2rem;
}

/* Список ссылок */
.menu-links {
    list-style: none; /* Убираем маркеры (точки) */
}

.menu-links li {
    margin-top: 1.5rem; /* Расстояние между ссылками */
}

.menu-links a {
    text-decoration: none; /* Убираем подчеркивание */
    color: #54595F;
    font-size: 2rem;
    font-weight: 500;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

/* Эффект при наведении на ссылку */
.menu-links a:hover {
    color: #323335;
    transform: translateX(-5px); /* Легкий сдвиг влево при наведении */
}

.separator {
    height: 4.4rem;
    margin: 1rem 0;
    width: 100%;
    display: flex;
    justify-content: center;
}

.separator img {
    height: 5.4rem;
    width: 18rem;
}

.block-info {
    background-color: #B6D9E7;
}

/* Адаптив для мобильных (опционально) */
@media (max-width: 768px) {
    .main-banner {
        flex-direction: column; /* На телефонах блоки встанут друг под друга */
    }

    .content-left, .content-right {
        flex: none;
        width: 100%;
        padding: 40px 20px;
    }

    .content-right {
        height: 400px;
    }
}

.advantages-section {
    display: flex;
    min-height: 60rem;
}

/* Левый блок с картинкой */
.advantages-image {
    flex: 1;
    max-width: 50%;

    border-radius: 3rem; /* Скругление как на макете */
}

.preem {
    background: url('/images/office_photo_1280x854_02.jpg') no-repeat center / cover;
}

.about {
    background: url('/images/office_photo_1280x854_01.jpg') no-repeat center / cover;
}

/* Правый блок с текстом */
.advantages-content, .faq {
    flex: 1;
    max-width: 50%;
    background-color: #B6D9E7; /* Светло-голубой фон из примера */
    padding: 7rem;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.faq {
    max-width: 100%;
}

.faq h2 {
    margin-top: 4rem;
}

.advantage-badge {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    color: #546e7a;
    display: flex;
    align-items: center;
    gap: 10px;
}

.badge-icon {
    font-size: 1.4rem;
    color: #455a64;
}

/* Заголовок (Тонкий и широкий) */
.advantage-title {
    font-family: 'Monitorica', sans-serif;
    font-weight: 400;
    font-size: 5rem;
    line-height: 1.1;
    color: #546e7a;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Текст описания */
.advantage-text {
    font-family: 'Montserrat', sans-serif;
    font-size: 2rem;
    line-height: 1.5;
    color: #455a64;
    max-width: 90%;
}

/* Адаптивность для планшетов и мобилок */
@media (max-width: 1100px) {
    .advantage-title {
        font-size: 36px;
    }

    .advantages-content {
        padding: 40px;
    }
}

@media (max-width: 850px) {
    .advantages-section {
        flex-direction: column;
        margin: 20px;
    }

    .advantages-image {
        height: 350px;
    }
}

/* --- ОБНОВЛЕННАЯ СЕКЦИЯ PRO (Слайдер с точками) --- */

.pro-section {
    background: url('/images/prin_bg_2560x854_01.jpg') no-repeat center / cover;
    color: #455a64;
    padding: 5rem;
    border-radius: 3rem;
    margin-top: 5rem;
}

.pro-header {
    margin-bottom: 60px;
}

.pro-info-line {
    display: flex;
    gap: 15px;
    font-size: 1.7rem;
    margin-bottom: 20px;
    line-height: 1.4;
}

.pro-square {
    font-size: 10px;
    margin-top: 3px;
    color: #546e7a;
}

.pro-main-title {
    font-family: 'Monitorica', sans-serif;
    font-size: 5rem;
    font-weight: 400;
    text-transform: uppercase;
}

/* Настройки Swiper для Pro */
.pro-slider {
    width: 100%;
    overflow: hidden; /* Важно: скрываем лишнее для Swiper */
}

/* Стилизация карточки внутри Swiper */
.pro-card {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 30px;
    padding: 40px 30px;
    height: auto; /* Позволяем Swiper контролировать высоту */
    min-height: 380px;
    backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
}

.pro-num {
    display: block;
    font-family: 'Monitorica', sans-serif;
    font-size: 3.5rem;
    margin-bottom: 5rem;
    opacity: 0.6;
}

.pro-card h3 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    font-size: 2rem;
    margin-bottom: 2rem;
    line-height: 1.3;
}

.pro-card p {
    font-size: 1.8rem;
    line-height: 1.6;
}

/* Стилизация пагинации (точек) */
.pro-pagination {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 40px;
}

/* Как выглядят сами точки Swiper */
.pro-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #546e7a;
    border-radius: 50%;
    opacity: 0.3;
    cursor: pointer;
    transition: all 0.3s ease;
}

/* Активная точка */
.pro-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    background: #455a64;
    transform: scale(1.3);
}

/* --- СЕКЦИЯ УСЛУГИ (Исправленная) --- */

/*.services-section {*/
/*    padding: 80px 0;*/
/*    background-color: #f0f4f7;*/
/*}*/

.services-container {
}

.services-header {
    padding: 7rem 7rem 7rem 7rem;
    border-radius: 3rem;
    background-color: #B6D9E7;
    margin-bottom: 4rem;
}

.services-tag {
    color: #4b4b4b;
    font-size: 1.8rem;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.services-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 20px;
}

.services-main-title {
    font-size: 4.8rem;
    line-height: 1.1;
    text-transform: uppercase;
    font-family: 'Monitorica', sans-serif;
    margin: 0;
}

.discription-and-button {
    display: flex;
    justify-content: space-between;
    align-items: end;
}


.services-description {
    max-width: 50%;
    font-size: 1.8rem;
    line-height: 1.5;
    color: #555;
}

.services-nav {
    display: flex;
    gap: 10px;
}

.services-nav button {
    width: 7rem;
    height: 5rem;
    border: 1px solid #455a64;
    border-radius: 20px;
    background: none;
    cursor: pointer;
    color: #455a64;
    transition: 0.3s;
    font-size: 2.8rem;
}

.services-nav button:hover {
    background: #455a64;
    color: white;
}

.service-card {
    position: relative;
    border-radius: 3rem;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}

.service-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.service-link-btn {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    background: #fff;
    color: #455a64;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border-radius: 12px;
    z-index: 2;
    font-size: 2.4rem;
    transition: 0.3s;
}

.service-link-btn:hover {
    background: #455a64;
    color: #fff;
}

.service-content {
    position: absolute;
    bottom: 15px;
    left: 15px;
    right: 15px;
    padding: 25px 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 25px;
    min-height: 100px;
    display: flex;
    align-items: center;
}

.service-content h3 {
    margin: 0;
    font-size: 1.8rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
    color: #333;
    line-height: 1.3;
}

/* Адаптив */
@media (max-width: 768px) {
    .services-main-title {
        font-size: 3.2rem;
    }

    .services-title-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .pro-section, .services-container {
        padding: 2rem;
    }
}

.faq-container {
    margin-top: 1rem;
}

.faq-details {
    margin-top: 2rem;
    font-size: 2.0rem;
}

.faq-details h4 {
    font-size: 2.8rem;
}

.faq-details h5 {
    font-size: 2.2rem;
}

/* Скрываем стандартный маркер (треугольник) */
.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary {
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: white; /* Цвет фона вопроса */
    cursor: pointer;
    border-radius: 10px;
    font-weight: bold;
    transition: background 0.3s;
}

/* Стили иконок */
.faq-icon {
    font-size: 3rem;
    width: 3rem;
    height: 3rem;
    text-align: center;
}

/* Синий фон */
.faq-icon .st000 {
    fill: #007bff; /* Ваш синий цвет */
    transition: fill 0.3s ease; /* Плавный переход при смене */
}

/* Опционально: изменение цвета при наведении */
.faq-icon:hover .st000 {
    fill: #0056b3;
}

/* Логика смены плюса на минус */
.faq-item .minus {
    display: none;
}

.faq-item[open] .minus {
    display: inline;
}

.faq-item[open] .plus {
    display: none;
}

/* Стиль ответа */
.faq-answer {
    padding: 20px;
    background: #ffffff;
    border: 1px solid #f1f1f1;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
}