.gradient-text {
    font-size: 1rem; /* Пример размера текста */
    font-weight: bold; /* Толщина текста */
    background: -webkit-linear-gradient(90deg,#d4179f,#5b49c9); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(90deg,#d4179f,#5b49c9); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    -webkit-background-clip: text; /* Область заливки только для текста */
    -webkit-text-fill-color: transparent; /* Делает текст прозрачным, чтобы был виден градиент */
    text-align: center; /* Выравнивание текста, если нужно */
}

/* Стили для загрузчика */
#loader {
    display: none;
    margin: 20px auto;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#loader_1 {
    display: none;
    margin: 20px auto;
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #3498db;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
}

.card-1{
    --primary-800: #4c1d95;
    --light: #d9d9d9;
     background-color:#000;
     border: 1px solid #2B2B2B;

    /*border: 1px solid transparent; !* Прозрачная рамка *!*/
  /*border-image: linear-gradient(to right, red, blue) 1; !* Градиент *!*/
}

.card-1:hover {
  box-shadow: 0 0 25px /*rgba(9, 117, 241, 0.8);*/ #6e42ff;
  border-color: /*#0974f1;*/ #6e42ff;
  /*filter: drop-shadow(0px 0px 30px rgba(209, 38, 197, 1));*/
}

.image_container {
  overflow: hidden;
  cursor: pointer;

  position: relative;
  /*z-index: 5;*/

  width: 100%;
  height: 5rem;
  background-color: var(--primary-800);

  border-radius: 0.5rem;
}

.image_container .image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  width: 3rem;
  fill: var(--light);
}

.card-body a {
  display: inline-block; /* Ссылки остаются на своих местах */
  padding-top: 5px; /* Верхний отступ */
  padding-bottom: 5px; /* Нижний отступ */
  line-height: 1.5; /* Регулируем вертикальное пространство */
}

/* === Featurettes as full clickable cards === */
.featurette-link-wrap{
  display:block;
}

.featurette-link{
  display:block;
  text-decoration:none;
  color: inherit;
  border-radius: 16px;
  padding: 10px 8px;
  transition: transform .12s ease, background-color .12s ease;
}

.featurette-link:hover{
  cursor: pointer;
  background: rgba(255,255,255,.03);
  transform: translateY(-1px);
}

.featurette-link:active{
  transform: translateY(0);
}

/* media box keeps image smaller, but responsive */
.featurette-media{
  width: min(300px, 100%);
  aspect-ratio: 1 / 1;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.featurette-img{
  width: 100%;
  height: 100%;
  object-fit: contain; /* аккуратно, без обрезки */
}

/* mobile tweaks */
@media (max-width: 575.98px){
  .featurette-link{
    padding: 8px 6px;
    border-radius: 14px;
  }
  .featurette-media{
    width: min(240px, 100%);
  }
}

/* Убираем подчёркивания у всей кликабельной featurette-карточки */
.featurette-link,
.featurette-link:hover,
.featurette-link:focus,
.featurette-link:active{
  text-decoration: none !important;
}

/* На всякий случай: если внутри окажутся вложенные <a> или элементы со стилями ссылок */
.featurette-link *{
  text-decoration: none !important;
}

/* И отдельно для ссылочных/текстовых классов Bootstrap внутри карточки */
.featurette-link .featurette-heading,
.featurette-link .lead,
.featurette-link .text-body-secondary{
  text-decoration: none !important;
}