.hero {
      position: relative;
      background: url('../images/backgroundpo.jpg') center/cover no-repeat;
      color: white;
      padding: 80px 0;
      z-index: 1;
      overflow: hidden;
    }

    .hero::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: -1;
    }

    .section {padding: 60px 0;}
    .bg-dark { color: white; background-color: #1d1d1d !important;}
    .card img {height: 180px; object-fit: cover;}
    .navbar {position: sticky; top: 0; z-index: 1030;}

    .timeline {
      position: relative;
      margin-left: 20px;
      padding-left: 20px;
      border-left: 2px solid #1c1c1c;
    }

    .timeline-item {
      position: relative;
      margin-bottom: 30px;
    }

    .timeline-marker {
      position: absolute;
      left: -30px;
      top: 0;
      width: 20px;
      height: 20px;
      background-color: #1c1c1c;
      border-radius: 50%;
      border: 3px solid #fff;
    }

    .timeline-content {
      padding-left: 10px;
    }

    .timeline-title {
      font-weight: 600;
      margin-bottom: 5px;
    }
    
    :root {
      --bs-primary: #1c1c1c; /* заменяем синий на угольный */
    }
    
    .btn-primary,
    .text-primary,
    .border-primary,
    .bg-primary,
    .timeline-marker {
      background-color: #1c1c1c !important;
      color: white !important;
      border-color: #1c1c1c !important;
    }

    .hero-custom {
      display: flex;
      flex-wrap: wrap;
      height: 100vh;
      padding: 0;
      margin: 0;
    }
    .hero-left {
      width: 60%;
      display: flex;
      flex-direction: column;
    }
    .top-black {
      background-color: #1d1d1d;
      color: #fff;
      padding: 30px 40px 20px 40px;
      min-height: 40%;
    }
    .top-row {
      display: flex;
      justify-content: start;
      gap: 30px 50px;
      flex-wrap: wrap;
    }
    .top-row img {
      height: 45px;
    }
    .contacts {
      font-size: 1.1rem;
      text-align: left;
    }
    .contacts i {
      color: #89f1c0;
      margin-right: 8px;
    }
    .contacts div {
      margin-bottom: 8px;
    }
    .contacts div span {
      display: inline;
    }
    .software {
      margin-top: 8rem;
      margin-bottom: 1rem;
      font-size: 1.1rem;
      display: flex;
      justify-content: start;
      gap: 20px 50px;
      flex-wrap: wrap;
      line-height: 1.5;
    }
    .software span {
      display: block;
      color: #fff;
      margin-bottom: 8px;
    }
    .slash-green {
      color: #89f1c0 !important;
      display: inline !important;
    }
    .bottom-grey {
      background-color: #4e4e4e;
      color: #fff;
      flex-grow: 1;
      padding: 60px 40px;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .bottom-grey p {
      font-size: 4.5rem;
      line-height: 1.2;
      margin-bottom: 40px;
      text-transform: uppercase;
    }
    .consult-btn {
      background-color: #89f1c0;
      color: #000;
      font-weight: bold;
      padding: 14px 28px;
      text-decoration: none;
      width: fit-content;
    }
    .consult-btn:hover {
      background-color: #6de0b1;
      color: #000;
    }
    .hero-right {
      width: 40%;
      background-image: url('../images/backgroundpo.jpg');
      background-size: cover;
      background-position: center;
    }

    .navbar {
      transform: translateY(-100%);
      height: 0;
      overflow: hidden;
      padding: 0;
    }

    .navbar.with-animation {
        transition: transform 0.3s ease-in-out;
    }

    .navbar.visible {
      transform: translateY(0);
      height: auto;
      padding: .5rem 1rem;
      overflow: visible;
    }

    .addressUnit{
      margin-right: 20px;
    }
    .addressUnit i{
      margin-right: 10px;
      color: #6de0b1;
    }

    .default-page-content img {
      max-width: 100%;
      width: 600px;
      max-height: 500px;
    }

    @media (max-width: 1480px) {
      .hero-left {
        width: 65%;
      }
      .hero-right {
        width: 35%;
      }
    }

    @media (max-width: 1370px) {
      .hero-left {
        width: 70%;
      }
      .hero-right {
        width: 30%;
      }
    }

    @media (max-width: 1270px) {
      .software {
        margin-top: 2rem;
      }
    }

    @media (max-width: 1190px) {
      .bottom-grey p {
        font-size: 3.5rem;
      }
    }

    @media (max-width: 940px) {
      .bottom-grey p {
        font-size: 2.5rem;
      }
    }

    @media (max-width: 768px) {
      .top-row,
      .contacts {
        display: none !important;
      }
      .hero-custom {
        flex-direction: column;
        height: auto;
      }
      .hero-left, .hero-right {
        width: 100%;
        height: auto;
      }
      .contacts {
        text-align: left;
      }
      .bottom-grey p {
        display: none;
      }
      .bottom-grey {
        padding: 0px 40px 30px;
        background-color: #1d1d1d;
      }
      .consult-btn {
        width: 100%;
        text-align: center;
      }
      .navbar {
        transform: translateY(0) !important;
        height: auto !important;
        overflow: visible !important;
        padding: .5rem 1rem !important;
        position: sticky !important;
        font-size: 16px;;
      }
      .addressUnit {
        margin-right: 10px;
      }
      .addressUnit i {
        margin-right: 5px;
      }
      .top-black {
        padding: 0px 40px 20px 40px;
      }
    }

    @media (max-width: 442px) {
      .contacts div {
        margin-bottom: auto;
      }
      .contacts div span {
        line-height: 2;
        text-align: center;
        font-size: 0.9rem;
      }
    }

    @font-face {
      font-family: 'Inter';
      src: url('../fonts/inter/Inter-VariableFont_opsz,wght.ttf') format('truetype');
      font-weight: 100 900;
      font-style: normal;
    }

    @font-face {
      font-family: 'Inter';
      src: url('../fonts/inter/Inter-Italic-VariableFont_opsz,wght.ttf') format('truetype');
      font-weight: 100 900;
      font-style: italic;
    }

    @font-face {
      font-family: 'FontAwesomeSolid';
      src: url('../fonts/FontAwesome/fa-solid-900.woff2') format('woff2');
      font-style: normal;
      font-weight: 900;
    }

    .fa {
      font-family: 'FontAwesomeSolid' !important;
      font-weight: 900;
      display: inline-block;
      font-style: normal;
      font-size: inherit;
      text-rendering: auto;
      -webkit-font-smoothing: antialiased;
    }

    * {
      font-family: 'Inter', sans-serif !important;
    }