.nav-item.active {
  position: relative; /* Установка позиции для активного элемента меню */
}

.nav-item.active::before {
  content: '';
  position: absolute;
  top: 50%;
  left: calc(34%);
  width: 110px;
  height: 40px;
  border-radius: 30% 30% 30% 30%;
  border: 2px solid white;
  background-color: transparent;
  transform: translate(-50%, -50%);
  z-index: -1;

}
    .text-white{
    color:white;
    }
    .text-white a{
    color:white;
    text-decoration:none;
    }
    .text-white a:hover{
    color: #ddd;
    }

 body {
  background-image: url('/static/Image/Back3.png');
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100vh;
  margin: 0;
  overflow-x: hidden; /* Убираем горизонтальный скролл */
}
    /* Style for banner */
    .banner {
      padding: 20px;
      background-color: rgba(47, 33, 123,0.9); /* Прозрачный синий цвет фона */
      text-align: center; /* Выравнивание текста по центру */
      color: white; /* Белый цвет текста */
      background-image: url('/static/Image/Back1.png');
      background-size: cover; /* Масштабирование изображения */
      opacity: 0.8; /* Прозрачность фона */
    }
    .banner-logo {
      max-width: 100px; /* Adjust the size as needed */
    }
    .navbar-nav {
      margin: 0 auto; /* Выравнивание по центру */
      justify-content: center; /* Выравнивание элементов по центру */
    }
    .navbar-nav .nav-link {
      color: white !important; /* Белый цвет текста */
        font-size: 13px; /* Уменьшаем размер шрифта */
          margin-right: 55px;
    }
    .nav-item {
      margin: 0 70px; /* Добавление отступа между элементами навигации */
    }
    .container-full {
      width: 100%;
      height: 50%;
      background-size: cover;
      background-position: center;
    }
    .row {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90%;
    }
    .col {
      text-align: center;
      width:100px;
    }
    .small-image {
      width: 90%; /* Ширина равна 100% от родительского элемента */
      height: auto; /* Высота автоматически подстраивается согласно пропорциям изображения */
      object-fit: cover; /* Сохранить пропорции изображения и обрезать по размеру контейнера */
      margin-top: -170px; /* Сдвиг по вертикали на 20px вверх */
      margin-left: -130px; /* Сдвиг по горизонтали на 100px вправо */
      z-index:3;
      position:absolute;
    }
    .smart-image {
      width: 70%; /* Ширина равна 100% от родительского элемента */
      height: auto; /* Высота автоматически подстраивается согласно пропорциям изображения */
      object-fit: cover; /* Сохранить пропорции изображения и обрезать по размеру контейнера */
      margin-top: 120px; /* Сдвиг по вертикали на 120px вверх */
      z-index:3;
    }
    .ok-image {
      width: 50%; /* Ширина равна 100% от родительского элемента */
      height: auto; /* Высота автоматически подстраивается согласно пропорциям изображения */
      object-fit: cover; /* Сохранить пропорции изображения и обрезать по размеру контейнера */
      margin-top: -760px; /* Сдвиг по вертикали на -790px вверх */
    }
    .col-lg-5.text-white p {
      margin-top: -48px; /* Устанавливаем отступ сверху в -48px */
      text-align: center;
      margin-top: -100px;
    }
    /* Style for footer */
    .footer {
      background-image: url('/static/Image/Footer.png');
      width: 100%;
      height: 240px; /* Высота футера */
      position: absolute; /* Установка позиции для футера */
      bottom: 0; /* Расположение футера внизу страницы */

    }
.line-container {
  width: 100%;
  position: absolute;
  z-index: 3;
}

.line {
  width: 100%;
  height: 100px; /* Высота вашего прямоугольника */
  background-color: white; /* Белый цвет прямоугольника */
  position: absolute;
  transform: rotate(-1deg);
  top: -60px;
  left: 0;
}
.line1-container {
  width: 100%;
  height: 15%;
  margin-top: -95px;
  position: absolute;
  z-index: 1;
  transform: rotate(2deg);
  background-image: url('/static/Image/Line1.png');
  background-position: center;
}

.line1 {
  width: 100%;
  height: 50%;
}
.logo{
  position: relative; /* Позиционирование элемента */
  top: 80px; /* Отступ сверху 20 пикселей */
}
.footer-text p {
    text-align: center;
    line-height: 1.5;
    font-size: 13px;
    word-break: normal;
    padding: 27px -23px;
    margin-right: 241px;
}
  .footer-text{
  top:80px;
  margin-right: -100px;

 }

.footer-text-small p {
  line-height: 1; /* Устанавливаем маленький междустрочный интервал */
  margin-bottom: 5px; /* Добавляем небольшой отступ снизу между параграфами */
  text-align: center; /* Выравнивание текста по центру */
  margin-left: -65px;
  font-size: 13px;
}
.footer-text-small{
top:90px;
}
.footer-text-smalll p{
  line-height: 0.6; /* Устанавливаем маленький междустрочный интервал */
  text-align: right;
  font-size: 13px;
 }
 .footer-text-smalll {
 width: 50% !important;
top: 80px;
margin-right: 130px;
 }
/* Стили для кнопки */
.oval-button {
  position: absolute; /* Позиционирование */
  top: calc(50% + 140px); /* Расположение сверху */
  left: 50%; /* Расположение слева */
  transform: translateX(-50%); /* Центрирование */
  width: auto; /* Ширина кнопки под текст */
  height: auto; /* Высота кнопки под текст */
  padding: 10px 20px; /* Поля вокруг текста */
  border: 2px solid yellow; /* Желтая обводка */
  border-radius: 30px; /* Радиус скругления для овальной формы */
  background-color: blue; /* Синий фон кнопки */
  display: flex; /* Расположение внутренних элементов в ряд */
  justify-content: center; /* Выравнивание текста по центру */
  align-items: center; /* Выравнивание текста по центру */
  z-index: 4; /* Установка z-index выше, чем Line.png */
  text-decoration: none; /* Убираем стандартное подчеркивание для ссылки */
}

/* Стили для текста внутри кнопки */
.button-text {
  color: yellow; /* Желтый цвет текста */
  font-weight: bold; /* Жирный шрифт */
  text-transform: uppercase; /* Преобразование текста в верхний регистр */
  text-decoration: none; /* Убираем стандартное подчеркивание для ссылки */
}

/* Стили для изменения внешнего вида кнопки при наведении */
.oval-button:hover {
  background-color: darkblue; /* Изменяем фон кнопки при наведении */
}
.center-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 50vh;
    position: relative; /* Добавьте это, чтобы избежать проблем с позиционированием */
}
        #warg {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100px;
            width: 100%;
            text-align: center;
            font-size: 20px;
            margin-top: 105px;
            margin-right:-3px;
            color: white;
            font-size: 15px;
        }
        #reader {
            margin-bottom: -120px;
        }
        /* Стили для кнопки "ЗАНОВО СКАНИРОВАТЬ QR" */
.rescan-btn {
    background-color: rgb(26, 1, 176); /* Цвет фона */
    color: white; /* Цвет текста */
    border: 1px solid white; /* Обводка */
    border-radius: 25px; /* Скругленные углы */
    padding: 10px 20px; /* Внутренние отступы */
    margin-top: 310px; /* Отступ сверху */
    margin-right: -11px;
    cursor: pointer; /* Курсор */
    font-size: 13px; /* Размер шрифта */
    text-align: center; /* Выравнивание текста */
    position: absolute;
}
@media (max-width: 1200px){
   .line{
   top:-10px;
   }
   .line1-container {
   margin-top: -55px;
   }
.small-image {
        margin-top: -131px;
        width: 100%;
    }
   .ok-image{
   margin-top: -680px;
   }
    .col-lg-5.text-white p {
    text-align: center;
    margin-top: -87px;
    font-size: 14px;
    }
}
@media (max-width: 1000px){
   .line{
   top:38px;
   }
   .line1-container {
   margin-top: -16px;
   }
    .small-image {
        margin-top: -103px;
        width: 117%;
    }
.col-lg-5.text-white p {
        text-align: center;
        margin-top: -18px;
        font-size: 12px;
    }
        .ok-image {
        margin-top: -637px;
    }
@media (max-width: 768px){
.small-image {
        width: 0%;
    }
    .ok-image {
        width:0px;
    }
    .smart-image{
    width:0px;
    }

}
@media (max-width: 450px) {
#reader{
margin-bottom: -720px;
position: relative;
}
#warg{
margin-top: 650px;
position: relative;
}
  .nav-item.active::before {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(45%);
    width: 80px;
    height: 40px;
    border-radius: 30% 30% 30% 30%;
    border: 2px solid white;
    background-color: transparent;
    transform: translate(-50%, -50%);
    z-index: -1;
  }

  .banner {
    padding: 0;
    border-bottom-left-radius: 25px;
    border-bottom-right-radius: 25px;
    background-color: rgba(40, 31, 124, 0.90);
    background-image: none;
    opacity: 1;
  }

  .col-lg-5.text-white p {
    text-align: center;
    margin-top: 39px;
    font-size: 14.5px;
    width: 64%;
    margin-left: 69px;
  }

  .line {
    top: -131px;
    transform: rotate(0deg);
  }

  .oval-button {
    top: calc(50% + 155px);
    font-size: 10px;
  }

  .banner-logo {
    max-width: 0;
  }

  .line1-container {
    width: 0;
  }

  .navbar-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .navbar-nav .nav-link {
    color: white !important;
    font-size: 13px;
    margin-right: 11px;
  }

  .nav-item {
    width: 100%;
    text-align: center;
  }

  .navbar-nav {
    flex-direction: row;
  }

  .nav-item {
    margin-right: 0px;
    margin-left: 0px;
    margin-top: -12px;
    padding: 9px;
  }
.footer{
bottom: -100px;
        background-color: rgba(40, 31, 124);
        background-image: none; /* Убираем задний фон */
        height: 291px;
}
.footer-text-small a {
  font-size: 0px;
}
.footer-text-small p {
            font-size: 9px;
            margin-right: -370px;
            margin-top: 25px;
        }

.footer-text-smalll p{
  text-align: center;
  font-size: 9px;
 }
        .footer-text-smalll address {
            margin-top: -99px;
            margin-right: -57px;
        }
        .logo {
            position: relative;
            top: 108px;
            width: 54px;
            margin-left: 162px;
        }
.footer-text p {
    font-size: 10px; /* Adjust font size as needed */
    margin-left: 54px;
    margin-top: 10px;
  }
  .footer-text{
  margin-top: -260px;
  white-space: nowrap; /* Prevent wrapping to the next line */
  position: relative;
  }
}
@media (max-width: 450px) {
.footer{
bottom:-180px;
}
 }