.lh-25 {
     line-height: 2;
   }

   body {
     overflow-y: scroll;
     scrollbar-gutter: stable both-edges;
   }

   .two-color-stripe {
     display: flex;
     width: 100%;
   }

   .contacts-map .map-container {
     position: relative;
     width: 100%;
     height: 400px;
     border-radius: 12px;
     overflow: hidden;
   }

   .phone {
       color: #212529;
       font-size: 18px;
   }

   .phone:hover {
       color: #1E691E;
   }

   #map {
     width: 100%;
     height: 100%;
   }

   #map ymaps[class$="-ground-pane"] {
     filter: grayscale(100%) !important;
     -webkit-filter: grayscale(100%) !important;
   }

   #map ymaps[class$="-balloon-pane"],
   #map ymaps[class$="-objects-pane"] {
     filter: none !important;
   }

   .custom-balloon-right {
     background: #FFFFFF;
     padding: 35px;
     border-radius: 12px;
     width: 430px;
     border: 1px solid #539E53;
     box-shadow: 2px 2px 8px #539E53;
     text-align: left;
     /* фиксируем справа от метки */
     position: relative;
   }

   .no-icon {
     padding-left: calc(18px + 10px);
   }

   .contact-card-item {
     display: flex;
     align-items: flex-start;
     gap: 10px;
   }

   .contact-text-balloon {
     font-size: 24px;
     font-weight: 400;
     color: rgba(0, 0, 0, 0.6);
     /* black 60% */
     text-align: left;
   }

   .contact-site-balloon {
       font-size: 24px;
       font-weight: 400;
       color: rgba(0, 0, 0, 0.6);
       /* black 60% */
       text-align: left;
   }

   .contact-site-balloon:hover {
       color: #1E691E;
   }

   .contact-work-text-balloon {
     color: rgba(111, 111, 111, 0.5);
   }

   .color-1 {
     flex: 2;
     background-color: #AD2623;
     margin-right: -1%;
     position: relative;
     display: flex;
     align-items: center;
     padding: 10px 0;
   }

   .color-1 .content {
     display: flex;
     align-items: center;
     padding-left: 20px;
   }

   .color-1 .icon {
     width: 100px;
     height: 90px;
     margin-right: 50px;
     margin-left: 30px;
   }

   .color-1 .text {
     color: white;
     font-family: 'Lato', sans-serif;
     font-weight: bold;
     font-size: 23px;
   }

   .color-2 {
     flex: 1;
     background-color: #EC6E00;
     clip-path: polygon(5% 0, 100% 0, 100% 100%, 0 101%);
     margin-left: -1%;
     display: flex;
     align-items: center;
     justify-content: center;
     position: relative;
   }

   .color-2 .logo {
     max-width: 80%;
     /* Настройте размер логотипа */
     max-height: 70%;
     object-fit: contain;
   }

   hr {
     border: 1px solid;
   }

   table {
     font-size: 14px;
     text-align: center;
     vertical-align: middle;
   }

   th {
     text-align: center;
     vertical-align: middle !important;
   }

   table.table td,
   table.table th {
     font-size: 14px;
     line-height: 1.2;
     /* регулирует высоту строк */
     padding: 4px 6px;
     /* уменьшает высоту за счёт внутренних отступов */
     vertical-align: middle;
   }

   .hero__buttons {
     display: flex;
     flex-direction: column;
     gap: 20px;
     width: fit-content;
   }

   .feature-list {
     font-family: 'Lato', sans-serif;
     font-size: 19px;
     font-weight: 400;
     line-height: 1.5;
     padding-left: 24px;
     margin-top: 15px;
   }

   .feature-list-title {
     font-family: 'Lato', sans-serif;
     font-size: 19px;
     font-weight: 400;
   }

   .feature-list li {
     position: relative;
   }

   .feature-list li::marker {
      font-size: 26px;
    }
    
   .feature-list p {
     font-family: 'Lato', sans-serif;
     font-size: 19px;
     font-weight: 400;
     margin-bottom: 15px;
     color: #000;
   }

   /* Или фиксированная ширина */
   .btn--fixed {
     width: 180px;
   }


   /* 5. HEADER (основная шапка)
      ------------------------------------------------- */
   .main-header {
     background: #fff;

     /* пунктирная вертикальная линия */
     .header-divider {
       width: 1px;
       height: 48px;
       background-image: linear-gradient(to bottom, #cfcfcf 30%, rgba(0, 0, 0, 0) 0%);
       background-size: 1px 8px;
       background-repeat: repeat-y;
     }

     /* круглые иконки (heart, burger) */
     .btn-icon {
       width: 40px;
       height: 40px;
       border: 1px solid #d1d1d1;
       border-radius: 50%;
       background: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 1rem;
       transition: .15s;

       &:hover {
         background: #f8f9fa;
       }
     }

   }

   a {
     transition: .15s;

     &:hover {
       color: #fff;
       text-decoration: none;
     }
   }

   h6 {
     font-size: .75rem;
     letter-spacing: .05em;
   }

   .lh-25 li {
     line-height: 2;
   }
   }

   /* водяной знак — как прежде */
   .has-bg {
     position: relative;
     overflow: hidden;
     background: url('./images/footer.svg') center calc(100% - 100px) / 90% no-repeat;

   }

   /* сетка контактов + горячая линия */
   .contacts-grid {
     --bs-gutter-y: 1.5rem;
   }

   .hotline-box {
     text-align: center;
   }

   .navbar-nav {
     gap: 10px;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     width: 100%;
   }

   @media (min-width: 768px) {
     .hotline-box {
       text-align: left;
     }
   }

   /* 💠 7. OFF-CANVAS (бургер-меню справа)
   ------------------------------------------------- */
   /* overlay-затемнение */
   #burgerOverlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, .55);
     backdrop-filter: blur(2px);
     opacity: 0;
     visibility: hidden;
     transition: opacity .3s;
     z-index: 1040;
   }

   /* сам ящик-drawer */
   #burgerDrawer {
     position: fixed;
     top: 0;
     right: 0;
     width: 480px;
     max-width: 100%;
     height: 100vh;
     background: #fff;
     transform: translateX(100%);
     transition: transform .35s cubic-bezier(.4, 0, .2, 1);
     z-index: 1050;
     overflow-y: auto;
     box-shadow: -4px 0 20px rgba(0, 0, 0, .15);

     .drawer-inner {
       padding: 2.5rem 3rem;
     }

     /* водяной знак */
     .drawer-watermark {
       position: absolute;
       bottom: 20px;
       right: 30px;
       width: 70%;
       opacity: .05;
       pointer-events: none;
     }

     /* ссылки меню */
     .burger-nav a {
       display: block;
       font-size: 1.75rem;
       font-weight: 500;
       padding: .6rem 0;

     }
   }

   /* активное состояние */
   body.drawer-open {
     #burgerOverlay {
       opacity: 1;
       visibility: visible;
     }

     #burgerDrawer {
       transform: translateX(0);
     }
   }


   @media (max-width: 575.98px) {
     #burgerDrawer {
       width: 100%;
     }
   }


   :root {
     --green: #2ab464;
     --green-700: #1e8e4c;
     --green-border: #38c06a;
     --orange: #EA5B0C;
     --red: #c1362b;
     --ink: #1f2328;
     --muted: #6c757d;
     --soft: #f7f8f8;
     --line: #e9ecef;
   }

   @media (min-width:1200px) {
     .container {
       max-width: 1200px;
     }
   }

   html,
   body {
     background: #fff;
     color: var(--ink);
   }

   .topbar {
     background: #fff;
   }

   .brand {
     height: 36px
   }

   .nav-link {
     color: #222;
     font-weight: 400;
     padding: 18px 14px;
     font-size: 18px;
   }

   .nav-link:hover {
     color: #1E691E;
   }

   .hero {
     background: #fbfbfb;
   }



   @media (min-width:576px) {
     .hero {
       margin-left: calc((576px - 100vw)/2);
       margin-right: calc((576px - 100vw)/2);
     }
   }

   @media (min-width:768px) {
     .hero {
       margin-left: calc((768px - 100vw)/2);
       margin-right: calc((768px - 100vw)/2);
     }
   }

   @media (min-width:992px) {
     .hero {
       margin-left: calc((992px - 100vw)/2);
       margin-right: calc((992px - 100vw)/2);
     }
   }

   @media (min-width:1200px) {
     .hero {
       margin-left: calc((1200px - 100vw)/2);
       margin-right: calc((1200px - 100vw)/2);
     }
   }

   .hero__container {
     margin: 0 auto;
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 24px;

   }

   .hero__content {
     padding-right: 24px;
     padding-top: 80px;
   }

   .hero__title {
     line-height: 1.05;
     font-weight: 400;
     color: #222222;
     margin: 0 0 20px;
   }

   .hero__divider {
     height: 2px;
     width: 100%;
     max-width: 560px;
     background: #E5E5E5;
     margin: 12px 0 20px;
   }

   .hero__description {
     color: #6c757d;
     font-size: clamp(14px, 1.4vw, 22px);
     line-height: 1.55;
     margin-bottom: 20px;
   }

   .hero__button {
     display: inline-block;
     padding: 10px 18px;
     border: 1px solid #B9B9B9;
     text-decoration: none;
     color: #222222;
     transition: .2s ease;
     font-size: 14px;
     line-height: 1;
   }

   .hero__button:hover {
     transform: translateY(-1px);
     box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
   }

   .hero__articles {
     display: grid;
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 16px;
     margin-top: 28px;
   }

   .hero__article {
     display: grid;
     grid-template-columns: 72px 1fr;
     gap: 12px;
     padding: 12px;
     border-radius: 12px;
     background: #f8f9fa;
     text-decoration: none;
     color: inherit;
   }

   .hero__article-image {
     width: 72px;
     height: 54px;
     overflow: hidden;
   }

   .hero__article-image img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
   }

   .hero__article-type {
     display: inline-block;
     font-size: 12px;
     color: #539E53;
     margin-bottom: 6px;
   }

   .hero__article-title {
     font-size: 14px;
     line-height: 1.3;
     color: #222222;
     margin: 0;
   }

   .hero__media {
     position: relative;
     height: 100%;
     overflow: hidden;
     display: flex;
     justify-content: flex-end;
   }

   .hero__image {
     max-width: 100%;
     height: auto;
     display: block;
     object-fit: contain;
   }

   @media (max-width:1024px) {
     .hero__container {
       gap: 28px;
     }

     .hero__content {
       padding-right: 0;
       padding-bottom: 50px;
     }

     .hero__media {
       min-height: 320px;
     }

     .hero__articles {
       grid-template-columns: 1fr;
     }
   }

   .features {
     padding: 10px 0 0
   }

   .f-card {
     border: 1px solid #539E53;
     border-radius: 12px;
     background: #fff;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, .05);
   }

   .f-title {
     font-size: 16px;
     font-weight: 800;
     margin-bottom: .3rem;
   }

   .f-title-card {
     font-size: 24px;
     font-weight: 700;
     margin-bottom: 20px;
   }

   .f-card ul {
     margin: 0;
     padding-left: 35px;
   }

   .section-title {
     font-weight: 400;
     font-size: 37.37px;
     line-height: 1.2;
     margin-top: 60px;
     margin-bottom: 30px;
   }

   .images {
     display: flex;
     gap: 52px;
   }

   .images img {
     max-width: 100%;
     height: auto;
   }

   .table-shot {
     display: block;
     width: 100%;
     border: 1px solid #e7e7e7;
     border-radius: 8px;
   }

   .stripe {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     padding: 14px 16px;
     border-radius: 8px;
     background: var(--red);
     color: #fff;
     margin-top: 12px;
   }

   .stripe .left {
     display: flex;
     align-items: center;
     gap: 10px;
   }

   .stripe .txt {
     font-weight: 800;
     line-height: 1.1
   }

   .stripe .sub {
     font-size: .92rem;
     opacity: .95
   }

   .stripe .tag {
     background: #ff6a00;
     color: #fff;
     font-weight: 900;
     letter-spacing: .06em;
     padding: 8px 14px;
     border-radius: 6px;
     font-size: 1.25rem;
   }

   .leadwrap {
     border: 1px solid #e7e7e7;
     border-radius: 10px;
     padding: 18px;
     box-shadow: 0 12px 16px rgba(0, 0, 0, .04);
   }

   .leadwrap h3 {
     font-size: 20px;
     font-weight: 800;
     margin-bottom: 2px;
   }

   .leadwrap p {
     color: var(--muted);
     margin-bottom: 10px;
   }

   .form-check-input {
     border-color: #c6cbd1;
   }

   .step {
     border: 1px solid #539E53;
     border-radius: 12px;
     display: flex;
     gap: 45px;
     align-items: center;
     background: #fff;
     box-shadow: 5px 5px 10px rgba(0, 0, 0, .05);
     font-size: 24px;
     font-weight: 400;
   }

   .message-step {
       border: 1px solid #539E53;
       border-radius: 12px;
       background: #fff;
       box-shadow: 5px 5px 10px rgba(0, 0, 0, .05);
       font-size: 24px;
       font-weight: 400;
       margin-top: 60px;
   }

   .step-num {
     color: #539E53;
     display: flex;
     align-items: center;
     font-weight: 1000;
     font-size: 80px;
     padding-left: 25px;
   }

   .mapwrap {
     position: relative;
     border: 1px solid #e7e7e7;
     border-radius: 8px;
     overflow: hidden;
   }

   .contact-card {
     position: absolute;
     right: 18px;
     bottom: 18px;
     width: min(420px, 92%);
     background: #fff;
     border: 1px solid #e7e7e7;
     border-radius: 12px;
     padding: 14px 16px;
     box-shadow: 0 18px 28px rgba(0, 0, 0, .18);
   }

   .cline {
     display: flex;
     gap: 8px;
     align-items: center;
     margin: .45rem 0;
   }

   .icon {
     width: 18px;
     height: 18px;
     color: var(--green);
   }

   .watermark {
     background: #222;
     color: #fff;
     border-radius: 8px;
     padding: 26px 12px;
     margin-top: 18px;
     position: relative;
   }

   .watermark::before {
     content: "КРАТОН";
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     color: #fff;
     opacity: .06;
     font-weight: 900;
     font-size: 16rem;
     letter-spacing: .06em;
     user-select: none;
     pointer-events: none;
   }

   @media (max-width: 1199px) {
     .navbar-nav {
       gap: 10px;
     }

     .images img {
       max-width: 30%;
       height: auto;
     }

     .custom-balloon-right {
       width: 380px;
       padding: 25px;
     }

     .hero__content {
       padding-right: 0;
       padding-bottom: 50px;
     }



   }

   @media (max-width: 991px) {
     .images img {
       max-width: 30%;
       height: auto;
     }

     .custom-balloon-right {
       width: 380px;
       padding: 25px;
     }

     .hero__container {
       grid-template-columns: 1fr;
     }

     .hero__content {
       order: 1;
     }

     .hero__media {
       order: 2;
       display: flex;
       justify-content: center;
       margin-top: 20px;
     }

     .images {
       display: flex;
       flex-direction: column;
       gap: 20px;
       align-items: center;
     }

     .images img {
       max-width: 90%;
       height: auto;
     }

     .color-1 .text {
       font-size: 17px;
     }

     .contact-text-balloon {
       font-size: 19px;
     }

     .custom-balloon-right {
       width: 260px;
     }

     section[id] {
       scroll-margin-top: 250px;
     }

   }

   @media (max-width: 767px) {
     .two-color-stripe {
       display: block;
     }

     .two-color-stripe .color-1,
     .two-color-stripe .color-2 {
       width: 100%;
       clip-path: none;
       margin: 0;
     }

     .two-color-stripe .color-1 .content,
     .two-color-stripe .color-2 .logo {
       justify-content: center;
       display: flex;
       text-align: center;
     }

     .custom-balloon-right {
       width: 100%;
     }

     .contacts-map .map-container {
       height: 700px;
     }

     .step {
       font-size: 20px;
     }

     .contact-text-balloon {
       font-size: 20px;
     }

     .section-title {
       font-size: 32px;
     }

     .f-title-card {
       font-size: 20px;
     }

     .color-1 .text {
       font-size: 14px;
     }

     .color-1 .icon {
       height: 50px;
       margin-right: 0px;
       margin-left: 0px;
     }

     .color-1 .content {
       padding-left: 0px;
     }

     .color-1,
     .color-2 {
       padding: 15px;
     }

     .hero__buttons {
       flex-direction: column;
       width: 100%;
       gap: 10px;
     }

     .hero__buttons .btn {
       width: 100% !important;
       max-width: 100%;
     }

   }

   html {
     scroll-behavior: smooth;
   }

   .social-icons {
     display: flex;
     gap: 15px;
   }

   .btn-success {
     background-color: #539E53;
     transition: background-color 0.2s ease;
   }

   .btn-success:hover {
     background-color: #1E691E;
   }

   .btn-outline-dark {
     color: #212529;
     border-color: #212529;
     transition: all 0.2s ease;
   }

   .btn-outline-dark:hover {
     background-color: #212529;
     color: #fff;
   }

   .brand-and-phone {
      @media (max-width: 768px) {
          display: flex;
          flex-direction: column;
      }
   }