.categories {
    margin-top: 40px;
    margin-bottom: 40px;
    display: flex;
        gap: 20px; /* відступ між меню і контентом */
}
.categories-menu {
    flex: 0 0 19%; /* фіксована ширина меню */
}
#menu .nav-link {
    text-align: left;
    white-space: nowrap;   /* не дозволяє перенос рядка */
    font-family: 'Segoe UI', Roboto, sans-serif; /* сучасний шрифт */
    font-size: 15px;
    color: #031633;
    letter-spacing: 0.5px; /* трохи більший інтервал між літерами */
}
.glow-hover {
    transition: box-shadow 0.5s ease;
}

.glow-hover:hover {
    box-shadow: 0 0 25px rgba(0, 123, 255, 0.6); /* цвет и размер свечения */
}
.vendor-logo {
    display: block; /* робимо елемент блочним */
    margin: 0 auto; /* вирівнюємо по горизонталі */
    width: 145px; /* фіксована ширина */
    height: 55px; /* фіксована висота */
    object-fit: contain; /* зберігаємо пропорції без викривлень */
    border: 2px solid #ccc; /* рамка навколо */
    border-radius: 8px; /* закруглені кути */
    padding: 5px; /* внутрішній відступ */
    object-fit: contain; /* зберігає пропорції */
}
.vendors {
    display: flex; /* або inline-flex */
    gap: 10px;
    width: fit-content; /* стискає блок під контент */
    margin: 0 auto; /* центрує по горизонталі */
}
.vendor-logo.active-glow {
    box-shadow: 0 0 25px rgba(0, 123, 255, 0.6);
    transition: transform 0.3s, box-shadow 0.3s;
}
.card {
    border: none;
    box-shadow: none;
    background-color: transparent;
    padding: 0; /* або залишити відступи, якщо треба */
}

.list-group-circle .list-group-item {
    border: none;
    padding-left: 2em;
    position: relative;
}

.list-group-circle .list-group-item::before {
    content: "\25CF";
    color: #000;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1em;
}
.items {
    margin-left: 5px !important;
    flex: 1; /* займає решту простору */
}
/* Центрування і адаптивність зображення */
.intro-image {
    text-align: center;
    margin: 20px 0;
}
.intro-image img {
    max-width: 100%;
    height: auto;
    border: none;
    display: inline-block;
}

/* === Оптимізація для мобільних === */
@media (max-width: 767px) {

  .solutions{
  margin-top: 0;       /* прибираємо додатковий верхній відступ контейнера */
          padding-top: 0;      /* якщо є паддінг зверху */
          padding-left: 20px;  /* можна залишити трохи для тексту */
          padding-right: 20px; /* можна залишити трохи для тексту */
  }

  /* Сайдбар під контентом */
  .categories-menu {
    order: 2;              /* переносимо вниз */
    width: 100% !important;
    margin: 10px 0 !important;
  }

  /* Контент зверху */
  .items {
    order: 1;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Зменшуємо відступи у контейнера */
  .categories {
  display: flex;
  flex-direction: column; /* ставимо контент зверху, меню знизу */
    margin-top: 20px;
    margin-bottom: 20px;
  }

  /* Меню в хедері – компактніше */
  .navbar-nav .nav-link {
    font-size: 14px;
    padding: 6px 8px;
  }

  /* Кнопки */
  .btn {
    font-size: 14px !important;
    padding: 8px 12px !important;
  }

  /* Футер */
  #island.home p {
    padding-top: 0 !important; /* прибираємо зайвий відступ */
    font-size: 10px;
  }

  /* Лого вендорів у каруселі */
  .vendor-logo {
    width: 100px;
    height: 40px;
  }

  /* Контент у модалці */
  .modal-content {
    padding: 10px;
  }
   #menu .nav-link {
          color: #003366 !important; /* блакитний текст */
      }
}

/* Середні екрани (планшети) */
@media (min-width: 768px) and (max-width: 1200px) {
    .solutions {
            max-width: 100% !important; /* займає всю ширину екрана */
            padding-left: 15px;         /* зберігаємо невеликий відступ */
            padding-right: 15px;
        }
    #menu .nav-link {
        font-size: 13px;   /* зменшений шрифт для середніх екранів */
        padding: 6px 8px;  /* можна трохи зменшити відступи */
    }
    .items {
    margin-left: 30px; /* відступ від бокового меню */
    margin-right: 20px; /* відступ від правого краю */
        }
#content-area {
        font-size: 14px;  /* зменшений шрифт для середніх екранів */
        line-height: 1.5; /* можна трохи підкоригувати міжрядковий інтервал */
    }
}