/* --- ОБЩИЕ СТИЛИ (ЭКО-МИНИМАЛИЗМ) --- */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   /* ВКЛЮЧАЕМ ПЛАВНЫЙ СКРОЛЛ ДЛЯ ВСЕГО САЙТА */
   html {
       scroll-behavior: smooth;
   }

   /* Изменили фон на теплый "светлое дерево/лен", а текст на "горький шоколад" */
   body {
       font-family: 'Montserrat', sans-serif;
       background-color: #ffffff;
       color: #000000;
       overflow-x: hidden;
   }

   /* --- ОБЩИЕ СТИЛИ (ЭКО-МИНИМАЛИЗМ) --- */
   * {
       margin: 0;
       padding: 0;
       box-sizing: border-box;
   }

   /* Изменили фон на теплый "светлое дерево/лен", а текст на "горький шоколад" */
   body {
       font-family: 'Montserrat', sans-serif;
       background-color: #ffffff;
       color: #000000;
       overflow-x: hidden;
   }


/* --- СТИЛИ ДЛЯ НОВОГО ЛОГОТИПА (КАРТИНКИ) --- */

.main-logo-img {
    height: 50px;
    /* Высота логотипа в шапке (меняй цифру, если хочешь крупнее/мельче) */
    width: auto;
    display: block;
    object-fit: contain;
}

.footer-logo-img {
    height: 65px;
    /* Высота логотипа в подвале (там места побольше) */
    width: auto;
    display: block;
    margin-bottom: 20px;
    object-fit: contain;
}

/* Убираем подчеркивание, если оно вдруг появится у ссылки */
.logo-link,
.footer-logo-link {
    text-decoration: none;
    display: block;
}

/* На мобильных телефонах можно сделать логотип в шапке чуть поменьше, чтобы не теснил бургер */
@media (max-width: 600px) {
    .main-logo-img {
        height: 40px;
    }
}


   /* Вспомогательные классы */
   .mobile-only {
       display: none;
   }

   .desktop-only {
       display: flex;
       align-items: center;
       gap: 30px;
   }

   /* --- ШАПКА (HEADER) --- */
   .main-header {
       background-color: #ffffff;
       padding: 15px 40px;
       display: flex;
       justify-content: space-between;
       align-items: center;
       width: 100%;
   }

   .logo-box {
       display: flex;
       align-items: center;
       gap: 15px;
     
   }

   .logo-icon {
       width: 50px;
       height: 45px;
       border-left: 5px solid #000000;
       /* Шоколадный контур */
       border-bottom: 5px solid #000000;
       position: relative;
   }

   .logo-icon::after {
       content: '';
       position: absolute;
       top: 0;
       left: 10px;
       width: 5px;
       height: 100%;
       background: #006187;
       /* Хвойный зеленый */
   }

   .logo-text-wrap {
       display: flex;
       flex-direction: column;
   }

   .logo-slogan {
       font-size: 10px;
       letter-spacing: 1px;
       color: #666666;
       font-weight: 500;
       text-transform: uppercase;
   }

   .logo-name {
       font-size: 26px;
       font-weight: 800;
       line-height: 1;
       letter-spacing: -0.5px;
       color: #000000;
   }

   .logo-name span {
       color: #006187;
   }

   /* Хвойный акцент */

   .info-block {
       font-size: 14px;
       line-height: 1.4;
       color: #333333;
   }

   .info-label {
       font-weight: 700;
       color: #000000;
   }

   /* Обновленные иконки соцсетей (картинками) */
   .social-icons {
       display: flex;
       gap: 15px;
       /* Воздух между иконками */
       align-items: center;
   }

   .social-img-link {
       display: inline-flex;
       justify-content: center;
       align-items: center;
       width: 32px;
       /* Аккуратный размер для шапки */
       height: 32px;
       transition: transform 0.3s ease, opacity 0.3s ease;
   }

   .social-img-link img {
       width: 100%;
       height: 100%;
       object-fit: contain;
       /* Чтобы картинка не искажалась */
   }

   .social-img-link:hover {
       transform: scale(1.15);
       /* Плавное увеличение при наведении */
       opacity: 0.8;
       /* Легкое свечение */
   }

   /* Глубокий красно-коричневый */

   .phones-block {
       display: flex;
       flex-direction: column;
       gap: 2px;
   }

   .phone-link {
       text-decoration: none;
       color: #000000;
       font-size: 19px;
       font-weight: 400;
       transition: color 0.2s;
   }

   .phone-link span {
       font-weight: 800;
       color: #000000;
   }

   .phone-link:hover {
       color: #006187;
   }

   /* Кнопка бургера в шапке */
   .burger-btn {
       background: none;
       border: none;
       font-size: 38px;
       cursor: pointer;
       color: #000000;
       line-height: 1;
       display: none;
   }

   /* --- НАВИГАЦИЯ (МЕНЮ) --- */
   .main-nav {
       background-color: #ffffff;
       width: 100%;
       border-top: 1px solid #eeeeee;
       box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
       /* МАГИЯ ПРИЛИПАНИЯ: */
       position: sticky;
       top: 0;
       z-index: 999;
       /* Чтобы меню всегда было поверх других блоков */
   }

   .nav-container {
       padding: 0 40px;
   }

   .nav-list {
       list-style: none;
       display: flex;
       align-items: center;
       gap: 40px;
       width: 100%;
       transition: all 0.3s ease;
   }

   .nav-item {
       position: relative;
       height: 60px;
       display: flex;
       align-items: center;
   }

   .nav-link {
       text-decoration: none;
       color: #000000;
       font-size: 16px;
       font-weight: 600;
       transition: color 0.2s;
   }

   .nav-link:hover {
       color: #006187;
   }

   /* Кнопка Услуги - Хвойный зеленый */
   .btn-services {
       background-color: #ffd700;
       color: #000000;
       height: 100%;
       padding: 0 30px;
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 10px;
       cursor: pointer;
   }

   .btn-services:hover {
       background-color: #e6c200;
       color: #000000;
   }

   .hamburger-icon {
       font-size: 28px;
       font-weight: 400;
       line-height: 1;
       position: relative;
       top: -1px;
   }

   .arrow {
       font-size: 12px;
   }

   /* Выпадающее меню */
   .dropdown-menu {
       display: none;
       position: absolute;
       top: 60px;
       left: 0;
       background-color: #ffffff;
       min-width: 260px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
       list-style: none;
       z-index: 100;
       border-top: 3px solid #006187;
   }

   @media (min-width: 993px) {
       .dropdown:hover .dropdown-menu {
           display: block;
           animation: fadeIn 0.3s ease;
       }
   }

   .dropdown-item {
       border-bottom: 1px solid #f9f9f9;
   }

   .dropdown-link {
       text-decoration: none;
       color: #000000;
       display: block;
       padding: 15px 20px;
       font-size: 15px;
       transition: background-color 0.2s, padding-left 0.2s;
       font-weight: 500;
   }

   .dropdown-link:hover {
       background-color: #f9f9f9;
       color: #006187;
       padding-left: 25px;
   }

   /* Кнопка "Заказать звонок" */
   .nav-item-right {
       margin-left: auto;
   }

   .btn-call-request {
       background-color: transparent;
       border: 2px solid #006187;
       color: #006187;
       padding: 10px 20px;
       font-size: 14px;
       font-weight: 700;
       cursor: pointer;
       text-transform: uppercase;
       transition: all 0.2s;
       font-family: inherit;
       width: 100%;
   }

   .btn-call-request:hover {
       background-color: #006187;
       color: #ffffff;
   }

   /* --- ВСПЛЫВАЮЩЕЕ ОКНО (МОДАЛКА) --- */
   .modal-overlay {
       display: none;
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background-color: rgba(0, 0, 0, 0.8);
       /* Коричневатая затемняющая подложка */
       z-index: 1000;
       justify-content: center;
       align-items: center;
       padding: 20px;
   }

   .modal-content {
       background-color: #ffffff;
       padding: 40px;
       width: 100%;
       max-width: 450px;
       position: relative;
       box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
       animation: slideDown 0.3s ease;
       max-height: 90vh;
       overflow-y: auto;
   }

   .close-modal {
       position: absolute;
       top: 15px;
       right: 20px;
       font-size: 30px;
       color: #666666;
       cursor: pointer;
       line-height: 1;
       transition: color 0.2s;
   }

   .close-modal:hover {
       color: #000000;
   }

   .modal-title {
       font-size: 24px;
       font-weight: 800;
       margin-bottom: 10px;
       color: #000000;
   }

   .modal-text {
       font-size: 14px;
       color: #333333;
       margin-bottom: 25px;
       line-height: 1.5;
   }

   .modal-form input {
       width: 100%;
       padding: 15px;
       margin-bottom: 20px;
       border: 1px solid #cccccc;
       font-family: inherit;
       font-size: 16px;
       outline: none;
       transition: border 0.2s;
       color: #000000;
   }

   .modal-form input:focus {
       border-color: #006187;
   }

   .btn-submit-form {
       width: 100%;
       background-color: #ffd700;
       color: #000000;
       border: none;
       padding: 18px;
       font-size: 16px;
       font-weight: 700;
       text-transform: uppercase;
       cursor: pointer;
       transition: background-color 0.2s;
       font-family: inherit;
   }

   .btn-submit-form:hover {
       background-color: #e6c200;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
           transform: translateY(-10px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   @keyframes slideDown {
       from {
           opacity: 0;
           transform: translateY(-30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   /* --- АДАПТИВНОСТЬ (МЕДИА-ЗАПРОСЫ) --- */
   @media (max-width: 992px) {
       .desktop-only {
           display: none !important;
       }

       .mobile-only {
           display: inline-block;
       }

       li.mobile-only {
           display: flex;
       }

       .main-header {
           padding: 15px 20px;
           flex-direction: row;
           justify-content: space-between;
       }

       .burger-btn {
           display: block;
       }

       .main-nav {
           border-top: none;
       }

       .nav-container {
           padding: 0;
       }



       .nav-list {
           display: none;
           flex-direction: column;
           align-items: flex-start;
           gap: 0;
           background: #ffffff;
           border-top: 1px solid #eeeeee;
           max-height: calc(100vh - 65px);
           /* Ограничиваем высоту */
           overflow-y: auto;
           /* Добавляем внутренний скролл */
       }

       .nav-list.show {
           display: flex;
       }

       .nav-list.show {
           display: flex;
       }

       .nav-item {
           width: 100%;
           height: auto;
           border-bottom: 1px solid #eeeeee;
           flex-direction: column;
       }

       .nav-link {
           width: 100%;
           padding: 15px 20px;
           display: block;
       }

       .nav-link.btn-services {
           display: flex;
           flex-direction: row;
           width: 100%;
           padding: 15px 20px;
           justify-content: flex-start;
           align-items: center;
           gap: 12px;
       }

       .nav-link.btn-services .arrow.mobile-only {
           margin-left: auto;
       }

       .nav-item-right {
           margin-left: 0;
           padding: 20px;
           border-bottom: none;
       }

       .dropdown-menu {
           position: relative;
           top: 0;
           display: none;
           width: 100%;
           box-shadow: none;
           border-top: none;
           background-color: #f9f9f9;
       }

       .dropdown-menu.show {
           display: block;
       }

       .dropdown-link {
           padding: 12px 20px 12px 40px;
           font-size: 14px;
           border-bottom: 1px solid #eeeeee;
       }

       .dropdown-link:hover {
           padding-left: 45px;
       }

       .mobile-contacts.mobile-only {
           display: flex;
           flex-direction: column;
           padding: 25px 20px;
           gap: 20px;
           background-color: #f9f9f9;
           width: 100%;
           border-top: 1px solid #cccccc;
       }

       .mobile-contacts .phones-block {
           gap: 10px;
       }

       .mobile-contacts .social-icons {
           justify-content: flex-start;
       }

       .modal-content {
           padding: 30px 20px;
       }

       .modal-title {
           font-size: 20px;
       }
   }
















         /* === СТИЛИ БЛОКА 2: ПЕРВЫЙ ЭКРАН (НА ВСЮ ШИРИНУ) === */
    
         .hero-fullwidth {
             position: relative;
             width: 100%;
             min-height: 600px;
             /* Уменьшили высоту с 750px до 500px */
             background-size: cover;
             background-position: center;
             background-repeat: no-repeat;
             display: flex;
             align-items: flex-start;
             padding-top: 50px;
             /* Оставляем твои 30px сверху */
             padding-bottom: 70px;
             /* Аккуратный отступ снизу, чтобы форма не прилипала */
         }
    
         .hero-overlay {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             background: radial-gradient(circle at 0% 50%, rgba(0, 0, 0, 0.8) 25%, rgba(0, 0, 0, 0.6) 50%, rgba(0, 0, 0, 0) 75%);
             z-index: 1;
         }
    
         .hero-container {
             position: relative;
             z-index: 2;
             max-width: 1400px;
             width: 100%;
             margin: 0 auto;
             padding: 0 40px;
         }
    
                                /* --- Индивидуальный цвет и тень для первого слова в заголовке --- */
                                .hero-title span.accent-terrasa {
                                    color: #ffffff;
                                    /* Белый цвет */
                
                                    /* Двойная тень для максимального объема и читаемости */
                                    text-shadow:
                                        0px 5px 15px rgba(0, 0, 0, 0.7),
                                        /* Мягкая широкая тень вокруг */
                                        0px 2px 4px rgba(0, 0, 0, 0.9);
                                    /* Жесткая темная тень снизу для контраста */
                                }
         .hero-content {
             max-width: 650px;
         }
    
         .hero-title {
             font-size: 52px;
             font-weight: 800;
             line-height: 1.1;
             color: #ffffff;
             margin-bottom: 25px;
             letter-spacing: -1px;
            text-shadow:
                    0px 5px 15px rgba(0, 0, 0, 0.7),
                    /* Мягкая широкая тень вокруг */
                    0px 2px 4px rgba(0, 0, 0, 0.9);
                /* Жесткая темная тень снизу для контраста */
         }
    
         .hero-title span {
             color: #ffd700;
         }
    
         .hero-subtitle {
             font-size: 20px;
             line-height: 1.6;
             color: #f9f9f9;
             margin-bottom: 35px;
         }
    
         .hero-benefits {
             list-style: none;
             margin-bottom: 40px;
         }
    
         .hero-benefits li {
             font-size: 18px;
             color: #ffffff;
             font-weight: 500;
             margin-bottom: 15px;
             display: flex;
             align-items: center;
             gap: 12px;
         }
    
         /* --- СТИЛИ ДЛЯ РАЗДЕЛЕННОЙ ФОРМЫ (ИДЕАЛЬНЫЕ ПРОПОРЦИИ) --- */
         .hero-form-wrapper {
             margin-top: 40px;
             max-width: 650px;
         }
    
         .hero-inline-form {
             display: flex;
             width: 100%;
             gap: 15px;
             background-color: transparent;
             box-shadow: none;
             height: 65px;
         }
    
         /* Жестко привязываем эти стили ТОЛЬКО к первой форме (.hero-inline-form) */
         .hero-inline-form .input-group {
             display: flex;
             align-items: center;
             flex-grow: 1;
             height: 100%;
             padding-left: 20px;
             background-color: #ffffff;
             border-radius: 8px;
             border: 1px solid rgba(255, 255, 255, 0.1);
             box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
             box-sizing: border-box;
             margin-bottom: 0;
             /* Убираем отступ */
         }
    
         .hero-inline-form .input-icon {
             font-size: 20px;
             opacity: 0.6;
         }
    
         .hero-inline-form .hero-input {
             width: 100%;
             height: 100%;
             padding: 0 20px 0 15px;
             font-size: 17px;
             font-weight: 600;
             font-family: inherit;
             color: #000000;
             background-color: transparent;
             border: none;
             outline: none;
             letter-spacing: 1px;
             box-sizing: border-box;
         }
    
         .hero-inline-form .btn-form-submit {
             background-color: #ffd700;
             color: #000000;
             border: none;
             height: 100%;
             padding: 0 35px;
             font-size: 15px;
             font-weight: 800;
             text-transform: uppercase;
             cursor: pointer;
             transition: all 0.3s ease;
             font-family: inherit;
             flex-shrink: 0;
             border-radius: 8px;
             box-shadow: 0 10px 25px rgba(255, 215, 0, 0.3);
             box-sizing: border-box;
             display: flex;
             align-items: center;
             justify-content: center;
         }
    
         .hero-inline-form .btn-form-submit:hover {
             background-color: #e6c200;
             transform: translateY(-2px);
             box-shadow: 0 15px 30px rgba(255, 215, 0, 0.4);
         }
    
         .hero-form-note {
             font-size: 14px;
             /* Чуть увеличили текст */
             color: #f9f9f9;
             margin-top: 15px;
             opacity: 0.9;
             display: flex;
             align-items: center;
             gap: 8px;
         }
    
         /* --- АДАПТИВНОСТЬ --- */
         @media (max-width: 992px) {
             .hero-fullwidth {
                 min-height: 600px;
                 padding-top: 40px;
                 padding-bottom: 50px;
                 /* Добавили отступ снизу для планшетов */
             }
    
             .hero-overlay {
                 background: linear-gradient(to right, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 100%);
             }
    
             .hero-title {
                 font-size: 40px;
             }
    
             .hero-subtitle {
                 font-size: 18px;
             }
         }
    
         @media (max-width: 600px) {
             .hero-fullwidth {
                 padding-bottom: 60px;
                 /* Гарантированный отступ снизу на мобилках */
             }
    
             .hero-container {
                 padding: 0 20px;
             }
    
             .hero-title {
                 font-size: 32px;
             }
    
             .hero-inline-form {
                 flex-direction: column;
                 height: auto;
                 background-color: transparent;
                 box-shadow: none;
                 gap: 15px;
             }
    
             .hero-inline-form .input-group,
             .hero-inline-form .btn-form-submit {
                 width: 100%;
                 height: 65px;
                 border-radius: 4px;
             }
    
             .hero-form-note {
                 justify-content: center;
                 text-align: center;
             }
         }













                 /* === СТИЛИ БЛОКА 3: ПРЕИМУЩЕСТВА (WOW-ЭФФЕКТ) === */
                 .advantages-section {
                     width: 100%;
                     background-color: #f9f9f9;
                     padding: 100px 40px;
                 }
        
                 .advantages-container {
                     max-width: 1400px;
                     margin: 0 auto;
                     display: grid;
                     grid-template-columns: repeat(4, 1fr);
                     gap: 30px;
                 }
        
                 .adv-card-wow {
                     position: relative;
                     background-color: #ffffff;
                     /* Сделали нижний отступ меньше (было 40px, стало 25px) */
                     padding: 30px 30px 25px;
                     /* Уменьшили общую минимальную высоту на 40 пикселей (было 360px, стало 320px) */
                     min-height: 320px;
                     display: flex;
                     flex-direction: column;
                     overflow: hidden;
                     z-index: 1;
                     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
                     transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease;
                     cursor: default;
                 }
        
                 .adv-fill {
                     position: absolute;
                     top: -50px;
                     right: -50px;
                     width: 100px;
                     height: 100px;
                     background-color: #006187;
                     border-radius: 50%;
                     z-index: -1;
                     transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
                 }
        
                 .adv-watermark {
                     position: absolute;
                     top: 20px;
                     right: 20px;
                     /* Сделали цифру чуть больше для лучшего эффекта перекрытия */
                     font-size: 100px;
                     font-weight: 800;
                     color: #f4f4f4;
                     line-height: 0.8;
                     transition: color 0.6s ease, transform 0.6s ease;
                     pointer-events: none;
                 }
        
                 .adv-content {
                     position: relative;
                     z-index: 2;
                     display: flex;
                     flex-direction: column;
                     flex-grow: 1;
                     /* ВОТ МАГИЯ: Опускаем весь текстовый блок вниз, чтобы он наезжал на цифру */
                     margin-top: 65px;
                 }
        
                 .adv-title {
                     font-size: 22px;
                     font-weight: 800;
                     color: #000000;
                     margin-bottom: 15px;
                     transition: color 0.5s ease;
                 }
        
                 .adv-text {
                     font-size: 15px;
                     line-height: 1.6;
                     color: #333333;
                     transition: color 0.5s ease;
                 }
        
                 .adv-arrow {
                     margin-top: auto;
                     font-size: 24px;
                     font-weight: 300;
                     color: #ffd700;
                     opacity: 0;
                     transform: translateX(-20px);
                     transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
                 }
        
                 /* ========================================= */
                 /* МАГИЯ ПРИ НАВЕДЕНИИ МЫШКИ (HOVER ЭФФЕКТЫ) */
                 /* ========================================= */
        
                 .adv-card-wow:hover {
                     transform: translateY(-12px);
                     box-shadow: 0 30px 60px rgba(0, 97, 135, 0.15);
                 }
        
                 .adv-card-wow:hover .adv-fill {
                     transform: scale(15);
                 }
        
                 .adv-card-wow:hover .adv-title {
                     color: #ffffff;
                 }
        
                 .adv-card-wow:hover .adv-text {
                     color: #f9f9f9;
                 }
        
                 .adv-card-wow:hover .adv-watermark {
                     color: rgba(255, 255, 255, 0.05);
                     /* При наведении цифра чуть сдвигается для объема */
                     transform: scale(1.05) translate(-5px, 5px);
                 }
        
                 .adv-card-wow:hover .adv-arrow {
                     opacity: 1;
                     transform: translateX(0);
                 }
        
                 /* --- АДАПТИВНОСТЬ --- */
                 @media (max-width: 1200px) {
                     .advantages-container {
                         grid-template-columns: repeat(2, 1fr);
                     }
                 }
        
                 @media (max-width: 992px) {
                     .advantages-section {
                         padding: 80px 20px;
                     }
                 }
        
                 @media (max-width: 600px) {
                     .advantages-container {
                         grid-template-columns: 1fr;
                         gap: 20px;
                     }
        
                     .adv-card-wow {
                         padding: 30px 25px;
                         min-height: auto;
                     }
        
                     .adv-content {
                         margin-top: 50px;
                     }
        
                     /* На мобилках отступ чуть меньше */
        
                     .adv-arrow {
                         opacity: 1;
                         transform: translateX(0);
                         margin-top: 25px;
                         color: #006187;
                     }
        
                     .adv-card-wow:active .adv-fill {
                         transform: scale(15);
                     }
        
                     .adv-card-wow:active .adv-title {
                         color: #ffffff;
                     }
        
                     .adv-card-wow:active .adv-text {
                         color: #f9f9f9;
                     }
        
                     .adv-card-wow:active .adv-arrow {
                         color: #ffd700;
                     }
                 }



















                /* === СТИЛИ БЛОКА 5: ФАКТЫ О НАС (УЛЬТРА-ПРЕМИУМ) === */
                .facts-section-pro {
                    position: relative;
                    /* Делаем фон почти черным с легким зеленым оттенком для максимального контраста */
                    background-color: #006187;
                    padding: 120px 40px;
                    width: 100%;
                    overflow: hidden;
                }
        
                /* Мягкое внутреннее свечение на заднем фоне */
                .facts-glow {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    width: 1000px;
                    height: 1000px;
                    background: radial-gradient(circle, rgba(255, 215, 0, 0.2) 0%, rgba(0, 97, 135, 0) 70%);
                    z-index: 0;
                    pointer-events: none;
                }
        
                .facts-watermark {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    font-size: 320px;
                    font-weight: 900;
                    color: rgba(255, 255, 255, 0.02);
                    /* Максимально прозрачный, чтобы не мешать тексту */
                    text-transform: uppercase;
                    white-space: nowrap;
                    pointer-events: none;
                    z-index: 1;
                }
        
                .facts-container {
                    position: relative;
                    z-index: 2;
                    max-width: 1400px;
                    margin: 0 auto;
                }
        
                .facts-header {
                    text-align: center;
                    margin-bottom: 70px;
                }
        
                .text-white {
                    color: #ffffff !important;
                    margin-bottom: 20px;
                }
        
                .facts-divider {
                    width: 80px;
                    height: 3px;
                    background-color: #ffd700;
                    margin: 0 auto;
                    box-shadow: 0 0 15px rgba(255, 215, 0, 0.5);
                    /* Светящаяся полоса */
                }
        
                /* Сетка карточек */
                .facts-grid-pro {
                    display: grid;
                    grid-template-columns: repeat(3, 1fr);
                    gap: 30px;
                }
        
                /* СТИЛЬ СТЕКЛЯННОЙ КАРТОЧКИ (Glassmorphism) */
                .fact-card-pro {
                    background: rgba(255, 255, 255, 0.02);
                    /* Полупрозрачный белый */
                    border: 1px solid rgba(255, 255, 255, 0.05);
                    /* Тонкая рамка */
                    border-top: 1px solid rgba(255, 255, 255, 0.15);
                    /* Блик на верхней грани */
                    backdrop-filter: blur(15px);
                    /* Размытие фона под карточкой */
                    -webkit-backdrop-filter: blur(15px);
                    padding: 60px 40px;
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                    text-align: center;
                    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1),
                        background 0.6s ease,
                        border-color 0.6s ease,
                        box-shadow 0.6s ease;
                }
        
                /* Эффект парения при наведении */
                .fact-card-pro:hover {
                    transform: translateY(-15px);
                    /* Карточка взлетает */
                    background: rgba(255, 255, 255, 0.04);
                    border-color: rgba(255, 215, 0, 0.4);
                    /* Рамка становится слегка зеленой */
                    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.6),
                        0 0 40px rgba(255, 215, 0, 0.1);
                    /* Глубокая тень + зеленоватое свечение */
                }
        
                .fact-number-wrap {
                    display: flex;
                    align-items: flex-start;
                    justify-content: center;
                    margin-bottom: 20px;
                }
        
                /* Металлический градиент для цифр */
                .gradient-text {
                    font-size: 90px;
                    font-weight: 800;
                    line-height: 0.85;
                    font-variant-numeric: tabular-nums;
                    background: linear-gradient(180deg, #ffffff 0%, #cccccc 100%);
                    -webkit-background-clip: text;
                    -webkit-text-fill-color: transparent;
                }
        
                .fact-accent {
                    font-size: 50px;
                    font-weight: 700;
                    color: #ffd700;
                    line-height: 0.85;
                    margin-left: 5px;
                    text-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
                    /* Неоновое свечение значков */
                }
        
                .fact-text-modern {
                    font-size: 15px;
                    font-weight: 500;
                    color: #f9f9f9;
                    text-transform: uppercase;
                    letter-spacing: 2px;
                    line-height: 1.6;
                    opacity: 0.8;
                }
        
                /* --- АДАПТИВНОСТЬ --- */
                @media (max-width: 1200px) {
                    .facts-watermark {
                        font-size: 220px;
                    }
        
                    .gradient-text {
                        font-size: 75px;
                    }
        
                    .fact-card-pro {
                        padding: 50px 30px;
                    }
                }
        
                @media (max-width: 992px) {
                    .facts-section-pro {
                        padding: 80px 20px;
                    }
        
                    .facts-watermark {
                        font-size: 160px;
                    }
        
                    .facts-grid-pro {
                        grid-template-columns: 1fr;
                        gap: 30px;
                    }
        
                    .fact-card-pro {
                        padding: 40px 20px;
                    }
                }
        
                @media (max-width: 600px) {
                    .facts-watermark {
                        display: none;
                    }
        
                    .facts-header {
                        margin-bottom: 40px;
                    }
        
                    .gradient-text {
                        font-size: 65px;
                    }
        
                    .fact-accent {
                        font-size: 35px;
                    }
        
                    .fact-text-modern {
                        font-size: 13px;
                        letter-spacing: 1px;
                    }
                }
















                /* === СТИЛИ КВИЗА === */
                .quiz-section {
                    padding: 100px 40px;
                    background-color: #f9f9f9;
                    /* Бежевый фон для контраста */
                    width: 100%;
                }
        
                .quiz-container {
                    max-width: 1000px;
                    /* Делаем квиз чуть уже для удобства чтения */
                    margin: 0 auto;
                }
        
                .quiz-header {
                    text-align: center;
                    margin-bottom: 50px;
                }
        
                .quiz-wrapper {
                    background-color: #ffffff;
                    padding: 60px;
                    border-radius: 12px;
                    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);
                }
        
                /* Прогресс-бар */
                .quiz-progress {
                    width: 100%;
                    height: 6px;
                    background-color: #eeeeee;
                    border-radius: 10px;
                    margin-bottom: 15px;
                    overflow: hidden;
                }
        
                .progress-bar {
                    height: 100%;
                    background-color: #ffd700;
                    /* Яркий зеленый для прогресса */
                    width: 20%;
                    /* Начальное значение для Шага 1 */
                    transition: width 0.4s ease;
                }
        
                .progress-text {
                    font-size: 14px;
                    color: #666666;
                    font-weight: 600;
                    margin-bottom: 40px;
                    text-align: right;
                }
        
                /* Шаги квиза */
                .quiz-step {
                    display: none;
                    /* Скрываем все шаги по умолчанию */
                    animation: fadeIn 0.5s ease;
                }
        
                .quiz-step.active {
                    display: block;
                    /* Показываем только активный шаг */
                }
        
                @keyframes fadeIn {
                    from {
                        opacity: 0;
                        transform: translateY(10px);
                    }
        
                    to {
                        opacity: 1;
                        transform: translateY(0);
                    }
                }
        
                .quiz-question {
                    font-size: 26px;
                    font-weight: 800;
                    color: #000000;
                    margin-bottom: 30px;
                }
        
                /* Сетки для карточек ответов */
                .quiz-options {
                    display: grid;
                    gap: 20px;
                }
        
                .grid-3 {
                    grid-template-columns: repeat(3, 1fr);
                }
        
                .grid-2 {
                    grid-template-columns: repeat(2, 1fr);
                }
        
                /* Стилизация радио-кнопок как карточек */
                .quiz-option {
                    cursor: pointer;
                    display: block;
                }
        
                .quiz-option input {
                    display: none;
                    /* Прячем стандартный кружок */
                }
        
                .option-box {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    text-align: center;
                    padding: 25px 20px;
                    border: 2px solid #cccccc;
                    border-radius: 8px;
                    font-size: 16px;
                    font-weight: 600;
                    color: #333333;
                    transition: all 0.3s ease;
                    height: 100%;
                }
        
                .quiz-option:hover .option-box {
                    border-color: #006187;
                    background-color: #fcfcfb;
                }
        
                /* Активное состояние (когда выбрали) */
                .quiz-option input:checked+.option-box {
                    border-color: #ffd700;
                    background-color: #ffd700;
                    color: #000000;
                    box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
                }
        
                /* Ползунок для выбора длины */
                .quiz-slider-wrap {
                    max-width: 600px;
                    margin: 40px auto;
                    text-align: center;
                }
        
                .range-value {
                    font-size: 32px;
                    font-weight: 800;
                    color: #006187;
                    margin-bottom: 30px;
                }
        
                .quiz-range {
                    -webkit-appearance: none;
                    width: 100%;
                    height: 8px;
                    background: #eeeeee;
                    border-radius: 5px;
                    outline: none;
                }
        
                .quiz-range::-webkit-slider-thumb {
                    -webkit-appearance: none;
                    appearance: none;
                    width: 30px;
                    height: 30px;
                    border-radius: 50%;
                    background: #ffd700;
                    cursor: pointer;
                    box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
                }
        
                .range-labels {
                    display: flex;
                    justify-content: space-between;
                    margin-top: 15px;
                    font-size: 14px;
                    color: #666666;
                    font-weight: 600;
                }
        
                /* Финальный шаг */
                .quiz-final-text {
                    font-size: 16px;
                    color: #333333;
                    line-height: 1.6;
                    margin-bottom: 30px;
                }
        
                .quiz-final-form {
                    display: flex;
                    flex-direction: column;
                    gap: 20px;
                    max-width: 400px;
                }
        
                /* Навигация кнопок */
                .quiz-navigation {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    margin-top: 50px;
                    padding-top: 30px;
                    border-top: 1px solid #eeeeee;
                }
        
                .btn-prev {
                    background: none;
                    border: none;
                    color: #666666;
                    font-size: 16px;
                    font-weight: 700;
                    cursor: pointer;
                    text-transform: uppercase;
                    transition: color 0.3s;
                }
        
                .btn-prev:hover {
                    color: #000000;
                }
        
                .btn-next,
                .btn-submit-quiz {
                    background-color: #ffd700;
                    color: #000000;
                    border: none;
                    padding: 16px 40px;
                    font-size: 16px;
                    font-weight: 800;
                    border-radius: 4px;
                    cursor: pointer;
                    text-transform: uppercase;
                    transition: all 0.3s;
                    margin-left: auto;
                    /* Прижимает кнопку вправо */
                }
        
                .btn-next:hover,
                .btn-submit-quiz:hover {
                    background-color: #e6c200;
                    transform: translateY(-2px);
                }
        
                /* --- АДАПТИВНОСТЬ --- */
                @media (max-width: 992px) {
                    .quiz-wrapper {
                        padding: 40px 30px;
                    }
        
                    .grid-3 {
                        grid-template-columns: repeat(2, 1fr);
                    }
                }
        
                @media (max-width: 600px) {
                    .quiz-wrapper {
                        padding: 30px 20px;
                    }
        
                    .grid-3,
                    .grid-2 {
                        grid-template-columns: 1fr;
                    }
        
                    .quiz-question {
                        font-size: 20px;
                    }
        
                    .btn-next,
                    .btn-submit-quiz {
                        padding: 15px 30px;
                        font-size: 14px;
                    }
       
                }











                                 /* === СТИЛИ БЛОКА 4: КАТАЛОГ ЗАБОРОВ И УСЛУГ === */
                                 .catalog-section {
                                     padding: 100px 40px;
                                     background-color: #ffffff;
                                 }
                
                                 .catalog-container {
                                     max-width: 1400px;
                                     margin: 0 auto;
                                 }
                
                                 .section-header {
                                     text-align: center;
                                     margin-bottom: 60px;
                                 }
                
                                 .section-title {
                                     font-size: 40px;
                                     font-weight: 800;
                                     color: #000000;
                                     margin-bottom: 20px;
                                     letter-spacing: -0.5px;
                                 }
                
                                 .section-subtitle {
                                     font-size: 18px;
                                     color: #333333;
                                     max-width: 800px;
                                     margin: 0 auto;
                                     line-height: 1.6;
                                 }
                
                                 /* Сетка карточек: ТЕПЕРЬ 3 КОЛОНКИ для идеального квадрата 3х3 */
                                 .catalog-grid {
                                     display: grid;
                                     grid-template-columns: repeat(3, 1fr);
                                     gap: 30px;
                                 }
                
                                 .catalog-card {
                                     background-color: #f9f9f9;
                                     display: flex;
                                     flex-direction: column;
                                     border-radius: 0;
                                     transition: transform 0.4s ease, box-shadow 0.4s ease;
                                 }
                
                                 .catalog-card:hover {
                                     transform: translateY(-8px);
                                     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                                 }
                
                                 .card-image-wrap {
                                     width: 100%;
                                     height: 260px;
                                     /* Сделали фото чуть выше, раз колонок стало меньше */
                                     overflow: hidden;
                                 }
                
                                 .card-image {
                                     width: 100%;
                                     height: 100%;
                                     object-fit: cover;
                                     transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
                                 }
                
                                 .catalog-card:hover .card-image {
                                     transform: scale(1.08);
                                 }
                
                                 .card-body {
                                     padding: 35px 30px;
                                     display: flex;
                                     flex-direction: column;
                                     flex-grow: 1;
                                 }
                
                                 .card-title {
                                     font-size: 22px;
                                     font-weight: 800;
                                     color: #000000;
                                     margin-bottom: 25px;
                                 }
                
                                 .card-specs {
                                     list-style: none;
                                     margin-bottom: 30px;
                                     flex-grow: 1;
                                 }
                
                                 .card-specs li {
                                     font-size: 14px;
                                     color: #333333;
                                     margin-bottom: 12px;
                                     display: flex;
                                     justify-content: space-between;
                                     border-bottom: 1px dashed #cccccc;
                                     padding-bottom: 8px;
                                 }
                
                                 .card-specs span {
                                     font-weight: 700;
                                     color: #000000;
                                 }
                
                                 .card-price {
                                     font-size: 24px;
                                     font-weight: 800;
                                     color: #006187;
                                     margin-bottom: 25px;
                                 }
                
                                 .card-price span {
                                     font-size: 14px;
                                     font-weight: 500;
                                     color: #666666;
                                 }
                
                                 .btn-outline {
                                     display: block;
                                     /* Обязательно для ссылки, чтобы она занимала всю ширину */
                                     background-color: transparent;
                                     color: #006187;
                                     border: 2px solid #006187;
                                     padding: 16px 20px;
                                     font-size: 14px;
                                     font-weight: 800;
                                     text-transform: uppercase;
                                     text-decoration: none;
                                     /* Убираем подчеркивание у ссылки */
                                     cursor: pointer;
                                     transition: all 0.3s ease;
                                     text-align: center;
                                     width: 100%;
                                     font-family: inherit;
                                     box-sizing: border-box;
                                     /* Чтобы padding не вылезал за края */
                                 }
                
                                 .btn-outline:hover {
                                     background-color: #006187;
                                     color: #ffffff;
                                 }
                
                                 /* --- АДАПТИВНОСТЬ КАТАЛОГА --- */
                                 @media (max-width: 1200px) {
                                     .catalog-grid {
                                         grid-template-columns: repeat(2, 1fr);
                                     }
                                 }
                
                                 @media (max-width: 992px) {
                                     .catalog-section {
                                         padding: 80px 20px;
                                     }
                
                                     .section-title {
                                         font-size: 32px;
                                     }
                                 }
                
                                 @media (max-width: 600px) {
                                     .catalog-grid {
                                         grid-template-columns: 1fr;
                                         gap: 20px;
                                     }
                
                                     .card-body {
                                         padding: 30px 20px;
                                     }
                
                                     .card-image-wrap {
                                         height: 220px;
                                     }
                                 }
















                          /* === СТИЛИ БЛОКА 6: ЭТАПЫ РАБОТЫ (6 В РЯД) === */
                          .stages-section {
                              padding: 100px 40px;
                              background-color: #ffffff;
                              width: 100%;
                          }
            
                          .stages-container {
                              max-width: 1400px;
                              margin: 0 auto;
                          }
            
                          .stages-grid {
                              display: grid;
                              /* Ставим ровно 6 колонок для десктопа */
                              grid-template-columns: repeat(6, 1fr);
                              gap: 0;
                              margin-top: 50px;
                          }
            
                          /* Карточка этапа - делаем отступы компактнее */
                          .stage-card {
                              position: relative;
                              padding: 30px 15px 30px 0;
                              /* Уменьшили отступы, чтобы текст влез */
                              transition: transform 0.4s ease;
                          }
            
                          /* Общая тонкая серая линия */
                          .stage-line {
                              position: absolute;
                              top: 0;
                              left: 0;
                              width: 100%;
                              height: 2px;
                              background-color: #eeeeee;
                              transition: background-color 0.4s ease, height 0.4s ease;
                          }
            
                          /* Хвойная линия при наведении */
                          .stage-line::before {
                              content: '';
                              position: absolute;
                              top: 0;
                              left: 0;
                              width: 0;
                              height: 100%;
                              background-color: #006187;
                              transition: width 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
                          }
            
                          /* Уменьшаем цифру, чтобы она не "давила" на узкую карточку */
                          .stage-number {
                              font-size: 44px;
                              /* Было 60px */
                              font-weight: 800;
                              color: #f0f0f0;
                              line-height: 1;
                              margin-top: 25px;
                              margin-bottom: 15px;
                              transition: color 0.4s ease, transform 0.4s ease;
                          }
            
                          /* Уменьшаем заголовок */
                          .stage-title {
                              font-size: 16px;
                              /* Было 20px */
                              font-weight: 800;
                              color: #000000;
                              margin-bottom: 10px;
                              line-height: 1.3;
                              transition: color 0.4s ease;
                          }
            
                          /* Уменьшаем основной текст этапа */
                          .stage-text {
                              font-size: 13px;
                              /* Было 15px */
                              line-height: 1.5;
                              color: #333333;
                              padding-right: 10px;
                          }
            
                          /* Эффекты при наведении */
                          .stage-card:hover {
                              transform: translateY(-5px);
                          }
            
                          .stage-card:hover .stage-line::before {
                              width: 100%;
                          }
            
                          .stage-card:hover .stage-number {
                              color: #ffd700;
                              transform: translateX(5px);
                              /* Чуть меньший сдвиг для узкой карточки */
                          }
            
                          .stage-card:hover .stage-title {
                              color: #006187;
                          }
            
                          /* --- АДАПТИВНОСТЬ ДЛЯ 6 КОЛОНОК --- */
                          @media (max-width: 1200px) {
            
                              /* На экранах ноутбуков 6 колонок будет слишком мелко, перестраиваем в 3 */
                              .stages-grid {
                                  grid-template-columns: repeat(3, 1fr);
                                  row-gap: 50px;
                              }
            
                              .stage-card {
                                  padding: 30px 20px 30px 0;
                              }
            
                              .stage-title {
                                  font-size: 18px;
                              }
            
                              .stage-text {
                                  font-size: 14px;
                              }
                          }
            
                          @media (max-width: 992px) {
                              .stages-section {
                                  padding: 80px 20px;
                              }
            
                              /* На планшетах делаем 2 колонки */
                              .stages-grid {
                                  grid-template-columns: repeat(2, 1fr);
                                  row-gap: 40px;
                              }
                          }
            
                          @media (max-width: 600px) {
            
                              /* На телефонах выстраиваем в одну колонку */
                              .stages-grid {
                                  grid-template-columns: 1fr;
                                  row-gap: 30px;
                              }
            
                              .stage-card {
                                  padding: 0 0 0 20px;
                              }
            
                              /* Меняем линию с горизонтальной на вертикальную */
                              .stage-line {
                                  top: 0;
                                  left: 0;
                                  width: 2px;
                                  height: 100%;
                              }
            
                              .stage-line::before {
                                  width: 100%;
                                  height: 0;
                                  transition: height 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
                              }
            
                              .stage-card:hover .stage-line::before,
                              .stage-card:active .stage-line::before {
                                  height: 100%;
                              }
            
                              .stage-number {
                                  margin-top: 0;
                                  font-size: 40px;
                              }
            
                              .stage-title {
                                  font-size: 18px;
                              }
                          }















           /* === СТИЛИ БЛОКА 7: НАШИ РАБОТЫ === */
           .portfolio-section {
               padding: 100px 0;
               /* Убираем боковые отступы, чтобы сетка была на весь экран */
               background-color: #f9f9f9;
               /* Легкий контрастный фон */
           }
    
           .portfolio-container {
               max-width: 1400px;
               margin: 0 auto;
               padding: 0 40px;
           }
    
           /* Сетка без зазоров */
           .portfolio-grid {
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               width: 100%;
               margin-top: 50px;
           }
    
           .portfolio-item {
               position: relative;
               height: 400px;
               overflow: hidden;
               cursor: crosshair;
               /* Курсор-прицел для премиум-эффекта */
           }
    
           .portfolio-img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
           }
    
           /* Затемняющий слой с градиентом */
           .portfolio-overlay {
               position: absolute;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 97, 135, 0.4) 50%, rgba(0, 0, 0, 0) 100%);
               opacity: 0;
               display: flex;
               flex-direction: column;
               justify-content: flex-end;
               padding: 40px;
               transition: opacity 0.5s ease;
           }
    
           .portfolio-info {
               transform: translateY(20px);
               transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
           }
    
           .portfolio-title {
               font-size: 22px;
               font-weight: 800;
               color: #ffffff;
               margin-bottom: 8px;
           }
    
           .portfolio-location {
               font-size: 14px;
               font-weight: 500;
               color: #ffd700;
               /* Яркий акцентный цвет для локации */
               letter-spacing: 1px;
               text-transform: uppercase;
           }
    
           /* ========================================= */
           /* HOVER ЭФФЕКТЫ (Магия наведения)          */
           /* ========================================= */
    
           .portfolio-item:hover .portfolio-img {
               transform: scale(1.1);
               /* Фотография глубоко приближается */
           }
    
           .portfolio-item:hover .portfolio-overlay {
               opacity: 1;
               /* Появляется темный градиент */
           }
    
           .portfolio-item:hover .portfolio-info {
               transform: translateY(0);
               /* Текст элегантно выезжает снизу */
           }
    
           /* Кнопка под галереей */
           .portfolio-btn-wrap {
               text-align: center;
               margin-top: 60px;
           }
    
           .btn-solid {
               display: inline-block;
               background-color: #ffd700;
               color: #000000;
               padding: 18px 45px;
               font-size: 16px;
               font-weight: 800;
               text-transform: uppercase;
               text-decoration: none;
               transition: all 0.3s ease;
               border: 2px solid #ffd700;
           }
    
           .btn-solid:hover {
               background-color: #e6c200;
               border-color: #e6c200;
               transform: translateY(-3px);
               box-shadow: 0 10px 20px rgba(255, 215, 0, 0.2);
           }
    
           /* === СТИЛИ ДЛЯ МОДАЛКИ ПОРТФОЛИО (DARK LIGHTBOX) === */
           .portfolio-modal-overlay {
               display: none;
               position: fixed;
               top: 0;
               left: 0;
               width: 100%;
               height: 100%;
               /* Очень темный, почти черный хвойный фон */
               background-color: rgba(0, 0, 0, 0.95);
               z-index: 2000;
               justify-content: center;
               align-items: center;
               padding: 60px 40px;
               backdrop-filter: blur(10px);
               /* Легкое размытие сайта на фоне */
           }
    
           .portfolio-modal-content {
               width: 100%;
               max-width: 1400px;
               max-height: 90vh;
               /* Занимает почти весь экран по высоте */
               overflow-y: auto;
               /* Позволяет листать фото вниз */
               animation: slideDown 0.4s ease;
               padding-right: 15px;
               /* Отступ для красивого скроллбара */
           }
    
           /* Стилизуем полосу прокрутки внутри модалки */
           .portfolio-modal-content::-webkit-scrollbar {
               width: 6px;
           }
    
           .portfolio-modal-content::-webkit-scrollbar-thumb {
               background-color: #006187;
               border-radius: 10px;
           }
    
           .portfolio-modal-grid {
               display: grid;
               grid-template-columns: repeat(3, 1fr);
               /* 3 колонки для фото */
               gap: 30px;
           }
    
           .portfolio-modal-img {
               width: 100%;
               height: 350px;
               overflow: hidden;
           }
    
           .portfolio-modal-img img {
               width: 100%;
               height: 100%;
               object-fit: cover;
               transition: transform 0.5s ease;
           }
    
           .portfolio-modal-img:hover img {
               transform: scale(1.05);
               /* Легкое увеличение при наведении */
           }
    
           /* Кнопка крестика */
           .close-portfolio {
               position: fixed;
               top: 30px;
               right: 50px;
               font-size: 60px;
               color: #ffffff;
               cursor: pointer;
               z-index: 2001;
               transition: color 0.3s, transform 0.3s;
               line-height: 1;
               font-weight: 300;
           }
    
           .close-portfolio:hover {
               color: #ffd700;
               transform: scale(1.1);
           }
    
           /* АДАПТИВНОСТЬ ДЛЯ ГАЛЕРЕИ */
           @media (max-width: 1200px) {
               .portfolio-modal-grid {
                   grid-template-columns: repeat(2, 1fr);
               }
           }
    
           @media (max-width: 768px) {
               .portfolio-modal-overlay {
                   padding: 80px 20px 20px;
               }
    
               .close-portfolio {
                   top: 15px;
                   right: 25px;
                   font-size: 50px;
               }
    
               .portfolio-modal-grid {
                   grid-template-columns: 1fr;
                   gap: 20px;
               }
    
               .portfolio-modal-img {
                   height: 250px;
               }
           }
    
           /* --- АДАПТИВНОСТЬ --- */
           @media (max-width: 1200px) {
               .portfolio-grid {
                   grid-template-columns: repeat(2, 1fr);
               }
    
               .portfolio-item {
                   height: 350px;
               }
           }
    
           @media (max-width: 992px) {
               .portfolio-section {
                   padding: 80px 0;
               }
    
               .portfolio-overlay {
                   padding: 30px;
               }
           }
    
           @media (max-width: 600px) {
               .portfolio-grid {
                   grid-template-columns: 1fr;
               }
    
               .portfolio-item {
                   height: 300px;
               }
    
               /* На мобильных делаем оверлей всегда видимым, но полупрозрачным, т.к. нет hover */
               .portfolio-overlay {
                   opacity: 1;
                   background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 70%);
               }
    
               .portfolio-info {
                   transform: translateY(0);
               }
    
               .portfolio-title {
                   font-size: 18px;
               }
    
               .portfolio-location {
                   font-size: 12px;
               }
    
               .btn-solid {
                   width: 90%;
                   margin: 0 auto;
               }
           }














                        /* === СТИЛИ БЛОКА 8: ОТЗЫВЫ (БЕСКОНЕЧНАЯ ЛЕНТА + ФОТО + ЯНДЕКС) === */
                        .reviews-section {
                            padding: 100px 0 120px;
                            background-color: #ffffff;
                            width: 100%;
                            overflow: hidden;
                        }
            
                        .reviews-container {
                            max-width: 1400px;
                            margin: 0 auto;
                            padding: 0 40px;
                        }
            
                        /* Обёртка ленты */
                        .marquee-wrapper {
                            width: 100%;
                            overflow: hidden;
                            margin-top: 40px;
                            padding: 20px 0;
                        }
            
                        /* Бегущая дорожка */
                        .marquee-track {
                            display: flex;
                            gap: 30px;
                            width: max-content;
                            animation: scroll-left 60s linear infinite;
                        }
            
                        /* Остановка ленты при наведении */
                        .marquee-wrapper:hover .marquee-track {
                            animation-play-state: paused;
                        }
            
                        /* Карточка отзыва */
                        .review-card {
                            width: 380px;
                            flex-shrink: 0;
                            position: relative;
                            background-color: #f9f9f9;
                            padding: 40px 35px;
                            display: flex;
                            flex-direction: column;
                            border-top: 4px solid #ffd700;
                            transition: transform 0.4s ease, box-shadow 0.4s ease;
                            overflow: hidden;
                        }
            
                        .review-card:hover {
                            transform: translateY(-10px);
                            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
                            z-index: 10;
                        }
            
                        .quote-mark {
                            position: absolute;
                            top: -20px;
                            right: 20px;
                            font-size: 200px;
                            font-family: Georgia, serif;
                            color: rgba(0, 97, 135, 0.05);
                            line-height: 1;
                            pointer-events: none;
                            transition: color 0.4s ease, transform 0.4s ease;
                        }
            
                        .review-card:hover .quote-mark {
                            color: rgba(0, 97, 135, 0.1);
                            transform: translateY(10px);
                        }
            
                        .review-content {
                            position: relative;
                            z-index: 2;
                            display: flex;
                            flex-direction: column;
                            flex-grow: 1;
                        }
            
                        .review-stars {
                            font-size: 20px;
                            color: #ffd700;
                            margin-bottom: 25px;
                            letter-spacing: 2px;
                        }
            
                        .review-text {
                            font-size: 15px;
                            line-height: 1.7;
                            color: #000000;
                            margin-bottom: 25px;
                            /* Возвращенный стандартный отступ */
                            flex-grow: 1;
                        }
            
                        /* Парящая миниатюра-фотография */
                        .review-photo {
                            position: absolute;
                            bottom: 35px;
                            right: 35px;
                            width: 70px;
                            height: 70px;
                            margin-bottom: 0;
                            overflow: hidden;
                            border-radius: 8px;
                            border: 3px solid #ffffff;
                            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
                            z-index: 5;
                            background-color: #fff;
                        }
            
                        .review-photo img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                            transition: transform 0.6s ease;
                        }
            
                        .review-card:hover .review-photo img {
                            transform: scale(1.15);
                        }
            
                        /* Подвал с именем (обновлен под фото) */
                        .review-footer {
                            border-top: 1px solid #cccccc;
                            padding-top: 20px;
                            padding-right: 85px;
                            /* Отодвигаем текст от фото */
                            min-height: 70px;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                        }
            
                        .review-author {
                            font-size: 18px;
                            font-weight: 800;
                            color: #000000;
                            margin-bottom: 5px;
                        }
            
                        .review-service {
                            font-size: 13px;
                            font-weight: 500;
                            color: #666666;
                            text-transform: uppercase;
                            letter-spacing: 0.5px;
                        }
            
                        /* Анимация бегущей строки */
                        @keyframes scroll-left {
                            0% {
                                transform: translateX(0);
                            }
            
                            100% {
                                transform: translateX(calc(-50% - 15px));
                            }
                        }
            
                        /* Стили плашки Яндекс Карт */
                        .yandex-rating-bar {
                            margin-top: 60px;
                            display: flex;
                            justify-content: center;
                            width: 100%;
                            padding: 0 40px;
                        }
            
                        .yandex-content {
                            background-color: #ffffff;
                            border: 1px solid #cccccc;
                            display: flex;
                            align-items: center;
                            gap: 40px;
                            padding: 25px 50px;
                            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
                            transition: transform 0.3s ease, box-shadow 0.3s ease;
                            cursor: default;
                        }
            
                        .yandex-content:hover {
                            transform: translateY(-5px);
                            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
                            border-color: #ffd700;
                        }
            
                        .yandex-logo {
                            font-size: 22px;
                            font-weight: 700;
                            color: #000000;
                            letter-spacing: -0.5px;
                        }
            
                        .ya-letter {
                            color: #ff0000;
                            font-size: 26px;
                        }
            
                        .ya-sub {
                            font-weight: 400;
                            color: #666666;
                        }
            
                        .yandex-stars-wrap {
                            display: flex;
                            align-items: center;
                            gap: 15px;
                            padding-left: 40px;
                            border-left: 1px solid #cccccc;
                        }
            
                        .yandex-score {
                            font-size: 32px;
                            font-weight: 800;
                            color: #000000;
                            line-height: 1;
                        }
            
                        .yandex-stars {
                            display: flex;
                            gap: 2px;
                            color: #ffd700;
                            font-size: 24px;
                        }
            
                        .star-fill.half {
                            position: relative;
                            color: #cccccc;
                        }
            
                        .star-fill.half::after {
                            content: '★';
                            position: absolute;
                            left: 0;
                            top: 0;
                            width: 80%;
                            overflow: hidden;
                            color: #ffd700;
                        }
            
                        .yandex-stat {
                            font-size: 14px;
                            font-weight: 600;
                            color: #666666;
                            text-transform: uppercase;
                            letter-spacing: 1px;
                        }
            
                        /* --- АДАПТИВНОСТЬ --- */
                        @media (max-width: 992px) {
                            .reviews-section {
                                padding: 80px 0;
                            }
            
                            .review-card {
                                width: 320px;
                                padding: 30px 25px;
                            }
            
                            .review-photo {
                                bottom: 25px;
                                right: 25px;
                                width: 60px;
                                height: 60px;
                            }
            
                            .review-footer {
                                padding-right: 75px;
                            }
            
                            .yandex-content {
                                flex-direction: column;
                                gap: 20px;
                                padding: 30px;
                                text-align: center;
                            }
            
                            .yandex-stars-wrap {
                                border-left: none;
                                padding-left: 0;
                                border-top: 1px solid #cccccc;
                                padding-top: 20px;
                            }
                        }
            
                        @media (max-width: 600px) {
                            .review-card {
                                width: 280px;
                            }
            
                            .quote-mark {
                                font-size: 150px;
                                right: 10px;
                            }
            
                            .marquee-track {
                                animation: scroll-left 45s linear infinite;
                                gap: 20px;
                            }
            
                            .yandex-rating-bar {
                                padding: 0 20px;
                            }
            
                            .yandex-score {
                                font-size: 28px;
                            }
            
                            .yandex-stars {
                                font-size: 20px;
                            }
            
                            .yandex-stat {
                                font-size: 12px;
                            }
            
                            @keyframes scroll-left {
                                0% {
                                    transform: translateX(0);
                                }
            
                                100% {
                                    transform: translateX(calc(-50% - 10px));
                                }
                            }
                        }










                                 /* --- АДАПТИВНОСТЬ БЛОКА ЗАЯВКИ (CTA) --- */
                                 @media (max-width: 992px) {
                                     .cta-section {
                                         padding: 80px 20px;
                                     }
                
                                     .cta-container {
                                         flex-direction: column;
                                         /* Выстраиваем элементы в колонку */
                                         gap: 40px;
                                     }
                
                                     .cta-info {
                                         text-align: center;
                                         /* Центруем текст на планшетах/мобилках */
                                     }
                
                                     .cta-list {
                                         display: inline-block;
                                         text-align: left;
                                         /* Список оставляем по левому краю для читаемости */
                                     }
                
                                     .cta-form-wrapper {
                                         flex: 1 1 auto;
                                         width: 100%;
                                         max-width: 500px;
                                         /* Чтобы форма не была слишком широкой на планшете */
                                         padding: 40px 30px;
                                     }
                                 }
                
                                 @media (max-width: 600px) {
                                     .cta-title {
                                         font-size: 32px;
                                         /* Уменьшаем заголовок для мобилок */
                                     }
                
                                     .cta-form-wrapper {
                                         padding: 30px 20px;
                                     }
                
                                     .alt-phone {
                                         font-size: 22px;
                                     }
                        
                                    }












                                       /* ======================================================= */
        /* --- АДАПТИВНОСТЬ ДЛЯ КАРТЫ И ПОДВАЛА (БЛОК 10) --- */
        /* ======================================================= */

        @media (max-width: 1200px) {

            /* На небольших ноутбуках и горизонтальных планшетах делаем 2 колонки */
            .footer-container {
                grid-template-columns: repeat(2, 1fr);
                gap: 50px 30px;
                /* Отступы: 50px по вертикали, 30px по горизонтали */
            }
        }

        @media (max-width: 992px) {

            /* На вертикальных планшетах уменьшаем высоту карты и внутренние отступы */
            .footer-map iframe {
                height: 350px;
            }

            .footer-bottom {
                padding: 60px 30px 30px;
            }
        }

        @media (max-width: 600px) {

            /* На мобильных телефонах выстраиваем всё в 1 колонку по центру */
            .footer-container {
                grid-template-columns: 1fr;
                gap: 40px;
                text-align: center;
                margin-bottom: 40px;
            }

            .footer-col {
                align-items: center;
                /* Центрируем содержимое внутри каждой колонки */
            }

            .footer-desc {
                margin: 0 auto;
            }

            .footer-socials {
                justify-content: center;
                /* Центрируем иконки соцсетей */
                margin-top: 15px;
            }

            .footer-map iframe {
                height: 280px;
                /* Компактная карта для телефона, чтобы не мешала скроллить */
            }

            .footer-bottom {
                padding: 50px 20px 20px;
            }
        }

        /* === СТИЛИ АЛЬТЕРНАТИВНЫХ КОНТАКТОВ В ФОРМЕ === */
        .form-alt-contacts {
            margin-top: 35px;
            text-align: center;
        }

        /* Аккуратная линия с текстом посередине */
        .alt-divider {
            display: flex;
            align-items: center;
            margin-bottom: 25px;
        }

        .alt-divider::before,
        .alt-divider::after {
            content: '';
            flex: 1;
            border-bottom: 1px solid #cccccc;
        }

        .alt-divider span {
            padding: 0 15px;
            font-size: 12px;
            color: #666666;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: 600;
        }

        /* Номер телефона */
        .alt-phone {
            display: inline-block;
            font-size: 26px;
            font-weight: 800;
            color: #000000;
            text-decoration: none;
            margin-bottom: 20px;
            transition: color 0.3s ease;
        }

        .alt-phone:hover {
            color: #006187;
            /* Наш хвойный при наведении */
        }

        /* Обновленные кнопки соцсетей (картинками) */
        .alt-socials {
            display: flex;
            justify-content: center;
            gap: 20px;
            /* Воздух между иконками */
            flex-wrap: wrap;
        }

        .alt-soc-img {
            display: inline-flex;
            justify-content: center;
            align-items: center;
            width: 45px;
            /* Сделали чуть крупнее, чем в шапке (там 32px) */
            height: 45px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .alt-soc-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .alt-soc-img:hover {
            transform: scale(1.15);
            /* Плавное увеличение */
            opacity: 0.8;
        }

        /* === СТИЛИ БЛОКА 9: ФОРМА ЗАЯВКИ (CTA) === */
        .cta-section {
            background-color: #006187;
            /* Наш фирменный хвойный цвет */
            padding: 100px 40px;
            width: 100%;
        }

        .cta-container {
            max-width: 1200px;
            margin: 0 auto;
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 60px;
        }

        .cta-info {
            flex: 1;
            color: #ffffff;
        }

        .cta-title {
            font-size: 42px;
            font-weight: 800;
            margin-bottom: 20px;
            line-height: 1.2;
        }

        .cta-subtitle {
            font-size: 18px;
            line-height: 1.6;
            color: #f9f9f9;
            margin-bottom: 30px;
            opacity: 0.9;
        }

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

        .cta-list li {
            font-size: 16px;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            color: #ffffff;
            font-weight: 500;
        }

        .cta-list li span {
            color: #ffd700;
            /* Яркая зеленая галочка */
            font-weight: 800;
            margin-right: 15px;
            font-size: 20px;
        }

        /* Карточка с формой */
        .cta-form-wrapper {
            flex: 0 0 450px;
            /* Фиксированная ширина формы */
            background-color: #ffffff;
            padding: 50px 40px;
            box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
            border-radius: 0;
            /* Строгие углы */
        }

        .form-title {
            font-size: 24px;
            font-weight: 800;
            color: #000000;
            margin-bottom: 30px;
            text-align: center;
        }

        .input-group {
            margin-bottom: 20px;
        }

        .form-input {
            width: 100%;
            padding: 18px 20px;
            font-size: 16px;
            border: 1px solid #cccccc;
            background-color: #f9f9f9;
            color: #000000;
            font-family: inherit;
            transition: border-color 0.3s ease, background-color 0.3s ease;
            box-sizing: border-box;
        }

        .form-input:focus {
            outline: none;
            border-color: #006187;
            background-color: #ffffff;
        }

        .btn-submit {
            width: 100%;
            background-color: #ffd700;
            color: #000000;
            padding: 20px;
            font-size: 16px;
            font-weight: 800;
            text-transform: uppercase;
            border: none;
            cursor: pointer;
            transition: background-color 0.3s ease, transform 0.3s ease;
            margin-bottom: 15px;
        }

        .btn-submit:hover {
            background-color: #e6c200;
            transform: translateY(-2px);
        }

        .form-policy {
            font-size: 12px;
            color: #666666;
            text-align: center;
            line-height: 1.4;
        }


        /* === СТИЛИ БЛОКА 10: FOOTER (ПОДВАЛ) === */
        .footer-section {
            width: 100%;
            display: flex;
            flex-direction: column;
        }

        .footer-map iframe {
            /* Карта на всю ширину */
            display: block;
            pointer-events: none;
            /* Карта не перехватывает скролл при прокрутке сайта */
        }

        /* Делаем карту активной только при наведении (чтобы случайно не застрять на ней при скролле) */
        .footer-map:hover iframe {
            pointer-events: auto;
        }

        .footer-bottom {
            background-color: #111111;
            /* Ультра-темный премиум фон */
            padding: 80px 40px 30px;
            color: #f9f9f9;
        }

        .footer-container {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            /* Даем чуть больше места первой колонке с текстом и третьей с соцсетями */
            grid-template-columns: 2fr 1fr 1.2fr 1fr;
            gap: 40px;
            margin-bottom: 60px;
        }

        .footer-col {
            display: flex;
            flex-direction: column;
            
        }

        /* Левая колонка (Логотип прижат влево) */
        .footer-left {
            text-align: left;
        }

        /* Центральная колонка (Навигация ровно по центру) */
        .footer-center {
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
        }

        /* Правая колонка (Контакты аккуратно прижаты вправо) */
        .footer-right {
            text-align: right;
            display: flex;
            flex-direction: column;
            align-items: flex-end;
        }

        /* Соцсети в подвале */
        .footer-socials {
            display: flex;
            gap: 15px;
            margin-top: 15px;
            justify-content: flex-start;
        }


        /* --- Мобильная адаптация для нового подвала --- */
        @media (max-width: 992px) {

            .footer-left,
            .footer-center,
            .footer-right {
                text-align: center;
                align-items: center;
            }

            .footer-socials {
                justify-content: center;
            }
        }

        .footer-logo {
            font-size: 28px;
            font-weight: 900;
            color: #ffffff;
            letter-spacing: 1px;
            margin-bottom: 20px;
        }

        .footer-logo span {
            color: #ffd700;
        }

        .footer-desc {
            font-size: 14px;
            line-height: 1.7;
            opacity: 0.7;
            max-width: 300px;
        }

        .footer-heading {
            font-size: 18px;
            font-weight: 700;
            color: #ffffff;
            margin-bottom: 25px;
            text-transform: uppercase;
            letter-spacing: 1px;
        }

        .footer-links {
            list-style: none;
            padding: 0;
        }

        .footer-links li {
            margin-bottom: 12px;
        }

        .footer-links a {
            color: #f9f9f9;
            text-decoration: none;
            font-size: 15px;
            opacity: 0.7;
            transition: opacity 0.3s ease, color 0.3s ease;
        }

        .footer-links a:hover {
            opacity: 1;
            color: #ffd700;
        }

        .footer-contact {
            font-size: 15px;
            margin-bottom: 15px;
            opacity: 0.8;
        }

        .footer-contact strong {
            color: #ffffff;
            font-weight: 600;
            margin-right: 5px;
        }

        .footer-copyright {
            border-top: 1px solid rgba(255, 255, 255, 0.1);
            padding-top: 30px;
            text-align: center;
            font-size: 13px;
            opacity: 0.5;
        }

        /* Кликабельные контакты в подвале */
        .footer-link {
            color: #f9f9f9;
            text-decoration: none;
            transition: color 0.3s ease;
        }

        .footer-link:hover {
            color: #ffd700;
            /* Хвойный зеленый при наведении */
        }

        /* Иконки соцсетей в подвале */
        .footer-socials {
            display: flex;
            gap: 15px;
            margin-top: 25px;
        }

        .footer-soc-img {
            display: inline-flex;
            width: 35px;
            height: 35px;
            transition: transform 0.3s ease, opacity 0.3s ease;
        }

        .footer-soc-img img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .footer-soc-img:hover {
            transform: scale(1.15);
            opacity: 0.8;
        }

        /* --- АДАПТИВНОСТЬ ДЛЯ ФИНАЛА --- */
        @media (max-width: 1200px) {

            /* На планшетах делаем 2 ряда по 2 колонки */
            .footer-container {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 768px) {

            /* На телефонах всё выстраиваем в 1 колонку по центру */
            .footer-container {
                grid-template-columns: 1fr;
                text-align: center;
            }

            .footer-col {
                align-items: center;
            }

            .footer-desc {
                margin: 0 auto;
            }

            .footer-socials {
                justify-content: center;
            }
        }
















           /* === СТИЛИ КНОПКИ "НАВЕРХ" === */
           .scroll-top-btn {
               position: fixed;
               bottom: 40px;
               right: 40px;
               width: 55px;
               height: 55px;
               background-color: #ffd700;
               /* Наш фирменный хвойный */
               color: #000000;
               border: none;
               border-radius: 50%;
               font-size: 24px;
               font-weight: 800;
               cursor: pointer;
               box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
               z-index: 1500;
    
               /* Изначально прячем кнопку */
               opacity: 0;
               visibility: hidden;
               transform: translateY(20px);
               transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
    
               /* Центруем стрелочку */
               display: flex;
               align-items: center;
               justify-content: center;
           }
    
           /* Класс, который скрипт будет добавлять при прокрутке вниз */
           .scroll-top-btn.show {
               opacity: 1;
               visibility: visible;
               transform: translateY(0);
           }
    
           .scroll-top-btn:hover {
               background-color: #e6c200;
               transform: translateY(-5px);
               /* При наведении чуть приподнимается */
               box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
           }
    
           /* Адаптивность для телефонов */
           @media (max-width: 768px) {
               .scroll-top-btn {
                   bottom: 20px;
                   right: 20px;
                   width: 45px;
                   height: 45px;
                   font-size: 20px;
               }
           }
.mobile-header-right {
    display: none;
}
          @media (max-width: 992px) {
    .mobile-header-right {
        display: flex;
        align-items: center;
        gap: 15px; 
    }

    .mobile-action-icon {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 28px;  
        height: 28px;
    }

    .mobile-action-icon img,
    .mobile-action-icon svg {
        width: 100%;
        height: 100%;
        object-fit: contain;
        display: block; 
    }

    .mobile-action-icon svg {
        fill: #000000; 
    }
    
    .burger-btn {
        margin-left: 5px;
        padding: 0;
        background: transparent;
        border: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        
        /* Возвращаем оригинальные настройки текста */
        font-size: 38px;
        line-height: 1; 
        
        /* РУЧНАЯ НАСТРОЙКА ВЫРАВНИВАНИЯ */
        position: relative;
        top: 3px; /* Если бургер нужно опустить. Если нужно поднять, ставь с минусом, например: -2px */
    }
}
@media (max-width: 992px) {
    .mobile-header-right {
        display: flex;
        align-items: center;
        /* Центрируем коробки по одной линии */
        gap: 12px;
        /* Отступ между кнопками */
    }

    /* 1. СОЗДАЕМ ТРИ ОДИНАКОВЫЕ КОРОБКИ для всех элементов */
    .mobile-action-icon,
    .burger-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        /* Единая ширина кликабельной зоны */
        height: 40px;
        /* Единая высота кликабельной зоны */
        padding: 0;
        margin: 0;
        background: transparent;
        border: none;
        text-decoration: none;
    }

    /* 2. Увеличиваем и выравниваем картинки внутри коробок */
    .mobile-action-icon img {
        width: 30px;
        /* Сделал Инстаграм крупнее */
        height: 30px;
        object-fit: contain;
        display: block;
    }

    .mobile-action-icon svg {
        width: 30px;
        /* Трубку делаем чуть меньше цифрами, чтобы визуально она была равна квадрату Инсты */
        height: 30px;
        fill: #000000;
        display: block;
    }

    /* 3. Усмиряем текстовый бургер */
    .burger-btn {
        font-size: 38px;
        line-height: 0;
        /* Убиваем скрытые отступы текста */

        /* РУЧНОЙ РЫЧАГ: 
           Так как коробки теперь одинаковые, если полоски бургера всё еще 
           кажутся выше или ниже, мы двигаем ТОЛЬКО их с помощью transform.
           Если бургер выше иконок -> ставь translateY(2px)
           Если бургер ниже иконок -> ставь translateY(-2px) */
        transform: translateY(-7px);
    }

    .mobile-action-icon:active,
    .burger-btn:active {
        opacity: 0.6;
    }
}